概要

はじめに

スタイリング

レイアウト

リリース

テーマ

（テーマのサブメニュー項目：概要、カラー、ダークモード、タイポグラフィ、スペーシング、ブレークポイント、半径、シャドウ、カーソル）

レイアウト

（レイアウトのサブメニュー項目：ボックス、フレックス、グリッド、コンテナ、セクション）

タイポグラフィ

（タイポグラフィのサブメニュー項目：テキスト、見出し、blockquote、コード、強調、キーボード入力、リンク、引用、強い強調）

コンポーネント

（コンポーネントのサブメニュー項目：アラートダイアログ、アスペクト比、アバター、バッジ、ボタン、コールアウト、カード、チェックボックス、**チェックボックスグループ**、チェックボックスカード、コンテキストメニュー、データリスト、ダイアログ、ドロップダウンメニュー、ホバーカード、アイコンボタン、インセット、ポップオーバー、プログレス、ラジオボタン、ラジオボタングループ、ラジオボタンカード、スクロールエリア、セグメントコントロール、セレクトボックス、セパレータ、スケルトン、スライダー、スピナー、スイッチ、テーブル、タブ、タブナビゲーション、テキストエリア、テキストフィールド、ツールチップ）

ユーティリティ

（ユーティリティのサブメニュー項目：アクセシブルアイコン、ポータル、リセット、スロット、テーマ、視覚的に隠す）

チェックボックスグループ

複数のオプションを同時に選択できるインタラクティブなボタンのセットです。

ソースコードを表示問題を報告するプレイグラウンドで表示

楽しい重要スマート

<CheckboxGroup.Root defaultValue={['1']} name="example">
  <CheckboxGroup.Item value="1">Fun</CheckboxGroup.Item>
  <CheckboxGroup.Item value="2">Serious</CheckboxGroup.Item>
  <CheckboxGroup.Item value="3">Smart</CheckboxGroup.Item>
</CheckboxGroup.Root>

API リファレンス

このコンポーネントは div 要素に基づいており、一般的なマージンプロップをサポートしています。

ルート

チェックボックスグループのすべてのパーツを含みます。

プロパティ	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"surface"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

<Flex align="center" gap="2">
  <CheckboxGroup.Root size="1" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="2" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="3" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>
</Flex>

バリアント

variant プロパティを使用して、チェックボックスの視覚スタイルを制御します。

<Flex gap="2">
  <Flex direction="column" asChild gap="2">
    <CheckboxGroup.Root variant="surface" defaultValue="1">
      <CheckboxGroup.Item value="1" />
      <CheckboxGroup.Item value="2" />
    </CheckboxGroup.Root>
  </Flex>

  <Flex direction="column" asChild gap="2">
    <CheckboxGroup.Root variant="classic" defaultValue="1">
      <CheckboxGroup.Item value="1" />
      <CheckboxGroup.Item value="2" />
    </CheckboxGroup.Root>
  </Flex>

  <Flex direction="column" asChild gap="2">
    <CheckboxGroup.Root variant="soft" defaultValue="1">
      <CheckboxGroup.Item value="1" />
      <CheckboxGroup.Item value="2" />
    </CheckboxGroup.Root>
  </Flex>
</Flex>

色

color プロパティを使用して、特定の色を割り当てます。

<Flex gap="2">
  <CheckboxGroup.Root color="indigo" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="cyan" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="orange" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="crimson" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>
</Flex>

ハイコントラスト

highContrast プロパティを使用して、背景との色のコントラストを上げます。

<Grid rows="2" gap="2" display="inline-grid" flow="column">
  <CheckboxGroup.Root color="indigo" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="indigo" defaultValue="1" highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="cyan" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="cyan" defaultValue="1" highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="orange" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="orange" defaultValue="1" highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="crimson" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="crimson" defaultValue="1" highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="gray" defaultValue="1">
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="gray" defaultValue="1" highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>
</Grid>

配置

CheckboxGroup.Item を Text 内に構成すると、最初の行のテキストと自動的に中央揃えされます。

<Flex direction="column" gap="3">
  <CheckboxGroup.Root size="1" defaultValue="1">
    <Text as="label" size="2">
      <Flex gap="2">
        <CheckboxGroup.Item value="1" /> Default
      </Flex>
    </Text>

    <Text as="label" size="2">
      <Flex gap="2">
        <CheckboxGroup.Item value="2" /> Compact
      </Flex>
    </Text>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="2" defaultValue="1">
    <Text as="label" size="3">
      <Flex gap="2">
        <CheckboxGroup.Item value="1" /> Default
      </Flex>
    </Text>

    <Text as="label" size="3">
      <Flex gap="2">
        <CheckboxGroup.Item value="2" /> Compact
      </Flex>
    </Text>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="3" defaultValue="1">
    <Text as="label" size="4">
      <Flex gap="2">
        <CheckboxGroup.Item value="1" /> Default
      </Flex>
    </Text>

    <Text as="label" size="4">
      <Flex gap="2">
        <CheckboxGroup.Item value="2" /> Compact
      </Flex>
    </Text>
  </CheckboxGroup.Root>
</Flex>

複数行のテキストでも自動的に適切に配置されます。

無効化

ネイティブの disabled 属性を使用して、無効化されたチェックボックスを作成します。

オフオン

<Flex direction="column" gap="2">
  <CheckboxGroup.Root defaultValue="2">
    <CheckboxGroup.Item value="1">Off</CheckboxGroup.Item>
    <CheckboxGroup.Item value="2">On</CheckboxGroup.Item>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root defaultValue="2">
    <CheckboxGroup.Item value="1" disabled>
      Off
    </CheckboxGroup.Item>
    <CheckboxGroup.Item value="2" disabled>
      On
    </CheckboxGroup.Item>
  </CheckboxGroup.Root>
</Flex>

前へチェックボックス

次へチェックボックスカード

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

チェックボックスグループ

API リファレンス

ルート

アイテム

例

サイズ

バリアント

色

ハイコントラスト

配置

無効化