Stripe Apps の Checkbox コンポーネント

チェックボックスを使用して、boolean 値の指定または制御を行います。

SDK バージョン

Checkbox コンポーネントをアプリに追加するには、以下のようにします。

import {Checkbox} from '@stripe/ui-extension-sdk/ui';

サンプルを読み込み中...

<Checkbox
  label="This is a Checkbox."
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Checkbox は、適切なすべてのネイティブ DOM 属性のほかに、以下のプロパティーを受け入れます。

Checkbox のプロパティ

プロパティー	タイプ
`autoFocus`	オプション `boolean \| undefined` If `true`, React will focus the element on mount.
`checked`	オプション `boolean \| undefined` Controls whether the input is selected. When you pass this prop, you must also pass an `onChange` handler that updates the passed value.
`defaultChecked`	オプション `boolean \| undefined` Specifies the initial value that a user can change.
`description`	オプション `string \| undefined` コントロールのラベルの横にレンダリングされる説明テキスト。
`disabled`	オプション `boolean \| undefined` 要素を無効化するかどうかを設定します。選択できなくなります。
`error`	オプション `string \| undefined` コントロールの下に表示されるエラーテキスト。
`form`	オプション `string \| undefined` Specifies the `id` of the `<form>` this input belongs to. If omitted, it’s the closest parent form.
`hiddenElements`	オプション `("label" \| "description" \| "error")[] \| undefined` 指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。
`indeterminate`	オプション `boolean \| undefined` Sets whether the `Checkbox` should be rendered as indeterminate (“partially checked”) or not. Note that this is purely visual, and will not change the actual `checked` state of the `Checkbox`. If a `Checkbox` is both `indeterminate` and `checked`, it will display as `indeterminate`.
`invalid`	オプション `boolean \| undefined` 要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。
`label`	オプション `React.ReactNode` コントロールを説明するテキスト。表示され、クリック可能になります。
`name`	オプション `string \| undefined` Specifies the name for this input that’s submitted with the form.
`onChange`	オプション `((event: React.ChangeEvent<HTMLInputElement>) => void) \| undefined` Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
`readOnly`	オプション `boolean \| undefined` If `true`, the input is not editable by the user.
`required`	オプション `boolean \| undefined` If `true`, the value must be provided for the form to submit.
`tabIndex`	オプション `number \| undefined` Overrides the default tab key behavior. Avoid using values other than `-1` and `0`.
`value`	オプション `string \| undefined` Controls the input’s text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value.

Checkbox コンポーネントを別のステータスに設定できます。

indeterminate
disabled
invalid

不確定

Checkbox コンポーネントは、indeterminate 状態にすることができます。これは、checked とそうでないものが含まれる可能性がある他のチェックボックスのセットの集約状態を表す場合に利用できます。このプロパティは純粋に視覚的なものであり、Checkbox の基になる checked 状態に影響を与えないことに注意してください。

サンプルを読み込み中...

const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(true);

const allChecked = checked1 && checked2;

const handleAggregateChange = () => {
  if (checked1 && checked2) {
    setChecked1(false);
    setChecked2(false);
  } else {
    setChecked1(true);
    setChecked2(true);
  }
};

return (
  <Box
    css={{
      stack: 'y',
    }}
  >
    <Checkbox
      label="This Checkbox is aggregating the state of the Checkboxes below it."
      checked={allChecked}
      indeterminate={checked1 !== checked2}
      onChange={handleAggregateChange}
    />
    <Checkbox
      label="Checkbox 1"
      checked={checked1}
      onChange={(e) => {
        setChecked1(e.target.checked);
      }}
    />
    <Checkbox
      label="Checkbox 2"
      checked={checked2}
      onChange={(e) => {
        setChecked2(e.target.checked);
      }}
    />
  </Box>
)

無効化

Checkbox は disabled に設定できます。こうすると、変更できなくなります。

サンプルを読み込み中...

<Checkbox label="This Checkbox is disabled." defaultChecked disabled />
<Checkbox disabled invalid label="This invalid Checkbox is disabled." />

無効

Checkbox コンポーネントに invalid のマークを付けることができます。これはスタイリング専用のプロパティであり、フォームの検証に役立ちます。フォームの送信が妨げられることはありません。

サンプルを読み込み中...

<Checkbox label="This Checkbox is in an invalid state." invalid />

ステータス管理

Use the Checkbox component as an uncontrolled input:

サンプルを読み込み中...

<Checkbox
  onChange={(e) => {
    console.log(e.target.checked);
  }}
  defaultChecked
  label="This Checkbox is uncontrolled."
/>

注

Stripe Apps の Checkbox コンポーネント

チェックボックスを使用して、boolean 値の指定または制御を行います。

Checkbox のプロパティ

不確定

無効化

無効

ステータス管理

参照情報