チェックボックス

チェックボックスを使用すると、ユーザーは個々の項目のリストから複数の項目を選択したり、1つの個々の項目を選択済みとしてマークしたりできます。

Storybook @nextui-org/checkbox React Aria ソーススタイルのソース

インストール

npx nextui-cli@latest add checkbox

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

インポート

使用方法

無効

サイズ

色

角丸

未確定

isIndeterminate プロパティは、ユーザーの操作に関係なく、Checkbox を未確定状態に設定し、false に設定されるまで外観を保持します。

取り消し線

カスタムチェックアイコン

デフォルトでは、IconPropsがアイコンコンポーネントに渡されます。isSelected、isIndeterminate、およびdisableAnimationがDOM要素に渡されないようにしてください。

制御されたコンポーネント

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

スロット

base: チェックボックスのラッパーで、配置、位置、一般的な外観を処理します。
wrapper: 相対的な位置、フレックスプロパティ、オーバーフロー処理、およびホバーおよび選択状態を管理するためのスタイルを含む内部コンテナ。
icon: チェックボックス内のアイコンで、サイズ、表示/非表示、およびチェック時の変更を制御します。
label: チェックボックスに関連付けられたテキスト。

カスタムスタイル

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

カスタム実装

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

注意: 上記のスタイルを実装するためにTailwind Variantsを使用しましたが、clsxのような他のライブラリを使用して同じ結果を得ることもできます。

データ属性

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

data-selected: チェックボックスがオンの場合。isSelectedプロパティに基づいています。
data-pressed: チェックボックスが押された場合。usePressに基づいています。
data-invalid: チェックボックスが無効な場合。validationStateプロパティに基づいています。
data-readonly: チェックボックスが読み取り専用の場合。isReadOnlyプロパティに基づいています。
data-indeterminate: チェックボックスが不確定な場合。isIndeterminateプロパティに基づいています。
data-hover: チェックボックスがホバーされている場合。useHoverに基づいています。
data-focus: チェックボックスがフォーカスされている場合。useFocusRingに基づいています。
data-focus-visible: チェックボックスがキーボードでフォーカスされている場合。useFocusRingに基づいています。
data-disabled: チェックボックスが無効になっている場合。isDisabledプロパティに基づいています。
data-loading: チェックボックスがローディング中の状態。 isLoading プロパティに基づきます。

アクセシビリティ

ネイティブ HTML の <input> 要素を使用して構築されています。
フォームの自動入力のようなブラウザ機能を完全にサポートしています。
キーボードフォーカスの管理とクロスブラウザの正規化。
Tab キーと Space キーのキーボードイベントをサポート。
支援技術のためのラベリングをサポート。
中間状態をサポート。

API

チェックボックスのプロパティ

属性	型	説明	デフォルト
children	`ReactNode`	チェックボックスのラベル。	-
icon	CheckboxIconProps	チェックボックスがチェックされたときに表示されるアイコン。	-
value	`string`	HTMLフォームを送信する際に使用される、チェックボックス要素の値。
name	`string`	HTMLフォームを送信する際に使用される、チェックボックス要素の名前。
size	`sm` \| `md` \| `lg`	チェックボックスのサイズ。	`md`
color	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	チェックボックスの色。	`primary`
radius	`none` \| `sm` \| `md` \| `lg` \| `full`	チェックボックスの角の丸み。	-
lineThrough	`boolean`	ラベルを打ち消し線で表示するかどうか。	`false`
isSelected	`boolean`	要素を選択する必要があるかどうか (制御された状態)。
defaultSelected	`boolean`	要素を選択する必要があるかどうか (制御されていない状態)。
isRequired	`boolean`	フォーム送信前にユーザーがチェックボックスを必須にするかどうか。	`false`
isReadOnly	`boolean`	チェックボックスを選択可能にするが、ユーザーによる変更を不可にするかどうか。
isDisabled	`boolean`	チェックボックスを無効にするかどうか。	`false`
isIndeterminate	`boolean`	中間状態は表示のみです。中間状態の表示は、ユーザーの操作に関係なく維持されます。
isInvalid	`boolean`	チェックボックスが無効かどうか。	`false`
validationState	`valid` \| `invalid`	チェックボックスに「有効」または「無効」の視覚的スタイルを表示するかどうか。(非推奨) 代わりにisInvalidを使用してください。	-
disableAnimation	`boolean`	アニメーションを無効にするかどうか。	`false`
classNames	`Record<"base"｜ "wrapper"｜ "icon"｜ "label", string>`	チェックボックスのスロットにカスタムクラス名をセットできます。	-

チェックボックスのイベント

属性	型	説明
onChange	`React.ChangeEvent<HTMLInputElement>`	要素の選択状態が変化したときに呼び出されるハンドラー。 `event.target.checked` (boolean)にアクセスして、新しいチェック状態を取得できます。
onValueChange	`(isSelected: boolean) => void`	要素の選択状態が変化したときに呼び出されるハンドラー。

型

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

type IconProps = {
  "data-checked": string;
  isSelected: boolean;
  isIndeterminate: boolean;
  disableAnimation: boolean;
  className: string;
};

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