チェックボックス

ユーザーがチェック状態と非チェック状態を切り替えることができるコントロール。

import React from 'react';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import './styles.css';

const CheckboxDemo = () => (
  <form>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">
        <Checkbox.Indicator className="CheckboxIndicator">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label className="Label" htmlFor="c1">
        Accept terms and conditions.
      </label>
    </div>
  </form>
);

export default CheckboxDemo;

機能

不確定状態をサポートします。

完全なキーボードナビゲーション。

制御された状態と制御されない状態の両方が可能です。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-checkbox

構造

すべてのパーツをインポートして組み立てます。

import * as Checkbox from '@radix-ui/react-checkbox';

export default () => (
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
);

API リファレンス

ルート

チェックボックスのすべてのパーツを含みます。input は、form 内で使用される場合にも正しくイベントが伝播するようにレンダリングされます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`defaultChecked`	`boolean \| 'indeterminate'`	デフォルト値なし
`checked`	`boolean \| 'indeterminate'`	デフォルト値なし
`onCheckedChange`	`function`	デフォルト値なし
`disabled`	`boolean`	デフォルト値なし
`required`	`boolean`	デフォルト値なし
`name`	`string`	デフォルト値なし
`value`	`string`	`on`

データ属性	値
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-disabled]`	無効時に存在します

インジケーター

チェックボックスがチェック状態または不確定状態の場合にレンダリングされます。この要素を直接スタイル設定することも、アイコンを配置するためのラッパーとして使用することも、または両方を行うこともできます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-disabled]`	無効時に存在します

例

不確定

チェックボックスの状態を制御することで、indeterminate に設定できます。

import { DividerHorizontalIcon, CheckIcon } from '@radix-ui/react-icons';
import * as Checkbox from '@radix-ui/react-checkbox';

export default () => {
  const [checked, setChecked] = React.useState('indeterminate');

  return (
    <>
      <StyledCheckbox checked={checked} onCheckedChange={setChecked}>
        <Checkbox.Indicator>
          {checked === 'indeterminate' && <DividerHorizontalIcon />}
          {checked === true && <CheckIcon />}
        </Checkbox.Indicator>
      </StyledCheckbox>

      <button
        type="button"
        onClick={() =>
          setChecked((prevIsChecked) =>
            prevIsChecked === 'indeterminate' ? false : 'indeterminate'
          )
        }
      >
        Toggle indeterminate
      </button>
    </>
  );
};

アクセシビリティ

トライステートチェックボックスのWAI-ARIAデザインパターンに準拠しています。

キーボード操作

キー	説明
`Space`	チェックボックスをオン/オフにします。

前へAvatar

次へCollapsible

GitHubでこのページを編集する。

概要

ガイド

コンポーネント

ユーティリティ

チェックボックス

機能