ラジオグループ

ラジオグループを使用すると、ユーザーは相互に排他的なオプションのリストから単一のオプションを選択できます。

インストール

npx nextui-cli@latest add radio

上記のコマンドは個別のインストール専用です。もし@nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。 @nextui-org/reactがすでにグローバルにインストールされている場合は、このステップをスキップできます。

インポート

使い方

無効化

デフォルト値

説明付き

水平

制御された

value と onValueChange プロパティを使用して、ラジオ入力値を制御できます。

注意: NextUI Radio は、onChange のようなネイティブイベントもサポートしており、Formik や React Hook Form のようなフォームライブラリで役立ちます。

無効

スロット

• RadioGroup スロット

  • base: ラジオグループのルートラッパー。ラベルとラッパーを囲みます。
  • wrapper: ラジオグループのラッパーで、すべてのラジオを囲みます。
  • label: ラジオグループのラベルで、ラッパーの前に配置されます。
  • description: ラジオグループの説明スロットです。
  • errorMessage: ラジオグループのエラーメッセージスロットです。

• ラジオのスロット

  • base: ラジオのルートラッパーで、すべての要素を囲みます。
  • wrapper: ラジオのラッパーで、コントロール要素を囲みます。
  • labelWrapper: ラベルと説明のラッパーです。
  • label: ラジオのラベルスロットです。
  • control: コントロール要素で、円形の要素です。
  • description: ラジオの説明スロットです。

カスタムスタイル

カスタムの Tailwind CSS クラスをコンポーネントスロットに渡すことで、RadioGroup および Radio コンポーネントをカスタマイズできます。

カスタム実装

ラジオグループをさらにカスタマイズする必要がある場合は、useRadio フックを使用して独自の実装を作成できます。

データ属性

• RadioGroup の base 要素には、次の属性があります。

  • data-orientation: ラジオグループの向き。orientation プロパティに基づきます。

• Radio の base 要素には、次の属性があります。

  • data-selected: ラジオが選択されている場合。isSelected プロパティに基づきます。
  • data-pressed: ラジオが押された場合。usePressに基づきます。
  • data-invalid: ラジオが無効な場合。validationState プロパティに基づきます。
  • data-readonly: ラジオが読み取り専用の場合。isReadOnly プロパティに基づきます。
  • data-hover-unselected: ラジオがホバーされ、チェックされていない場合。useHoverに基づきます。
  • data-hover: ラジオがホバーされている場合。useHoverに基づきます。
  • data-focus: ラジオがフォーカスされている場合。useFocusRingに基づきます。
  • data-focus-visible: キーボードでラジオがフォーカスされている場合。useFocusRingに基づきます。
  • data-disabled: ラジオが無効になっている場合。isDisabled プロパティに基づきます。

アクセシビリティ

• ラジオグループは、ARIA を介して支援技術に公開されます。
• 各ラジオは、ネイティブ HTML の <input> 要素で構築されており、必要に応じてカスタムスタイルを適用するために視覚的に隠すことができます。
• フォームの自動入力などのブラウザ機能を完全にサポートします。
• 矢印キーのキーボードイベントをサポートします。
• キーボードフォーカスの管理とクロスブラウザの正規化を行います。
• 支援技術のためのグループおよびラジオのラベル付けをサポートします。

API

RadioGroup のプロパティ

RadioGroup イベント

Radio プロパティ