スイッチ

スイッチコンポーネントは、チェック状態と非チェック状態を切り替える代替手段として使用されます。

インストール

npx nextui-cli@latest add switch

上記のコマンドは個別のインストール専用です。もし、 @nextui-org/react がグローバルにインストール済みであれば、この手順はスキップできます。

インポート

使い方

ラベル付き

無効

サイズ

色

サムネイルアイコン付き

アイコン付き

startContent および endContent プロパティを使用することで、スイッチの開始と終了にアイコンを追加することもできます。

制御された

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

スロット

• base: スイッチのベーススロット。メインのラッパーです。
• wrapper: スタートアイコン、エンドアイコン、サムのラッパー。
• thumb: スイッチのサム要素。円形の要素です。
• label: スイッチのラベルスロット。
• startContent: スイッチの開始位置にあるアイコンスロット。
• endContent: スイッチの終了位置にあるアイコンスロット。
• thumbIcon: サムの内側にあるアイコンスロット。

カスタムスタイル

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

カスタム実装

さらにスイッチをカスタマイズする必要がある場合は、useSwitch フックを使用して独自の実装を作成できます。

データ属性

Switchのbase要素には次の属性があります。

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

アクセシビリティ

• ネイティブHTMLの <input> 要素で構築されています。
• フォームの自動入力のようなブラウザ機能を完全にサポートします。
• キーボードフォーカスの管理とクロスブラウザの正規化。
• Tab キーと Space キーのキーボードイベントをサポートします。
• 支援技術のためのラベル付けサポート。
• ARIAを介して支援技術にスイッチとして公開します。

API

SwitchのProps

スイッチのイベント

型

スイッチのアイコンのプロパティ

type IconProps = {
  "data-checked": string;
  width: string;
  height: string;
  isSelected: boolean;
  className: string;
};

type CheckboxIconProps = ReactNode | ((props: IconProps) => ReactNode);