Radio

Radio を使用して、相互排他的なオプションセットから選択します。

SDK バージョン

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

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

<Radio label="This is a Radio." />

Radio プロパティ

プロパティー	タイプ
`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` 指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。
`invalid`	オプション `boolean \| undefined` 要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。
`label`	オプション `React.ReactNode` コントロールを説明するテキスト。表示され、クリック可能になります。
`name`	オプション `string \| undefined` Used to collect multiple Radios into a single, mutually exclusive group, for uncontrolled use cases.
`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 button 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.

無効化

Radio コンポーネントは無効化でき、これにより変更できなくなります。

<Radio name="group" label="Ah ah ah" disabled />
<Radio
  name="group"
  disabled
  defaultChecked
  label="You didn't say the magic word"
/>

無効

Radio を無効にすることができます。

<Radio label="This is an invalid input" invalid />

ステータス管理

Use the Radio component as an uncontrolled input:

<Radio
  name="group"
  label="Have some of Column A"
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>
<Radio
  name="group"
  label="Try all of Column B"
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Radio

Radio を使用して、相互排他的なオプションセットから選択します。

Radio プロパティ

無効化

無効

ステータス管理

参照情報