チェックボックスカード

A1 キーボードUS レイアウト

Pro マウスゼロ遅延ワイヤレス

Lightning マットワイヤレス充電

<Box maxWidth="600px">
  <CheckboxCards.Root defaultValue={['1']} columns={{ initial: '1', sm: '3' }}>
    <CheckboxCards.Item value="1">
      <Flex direction="column" width="100%">
        <Text weight="bold">A1 Keyboard</Text>
        <Text>US Layout</Text>
      </Flex>
    </CheckboxCards.Item>
    <CheckboxCards.Item value="2">
      <Flex direction="column" width="100%">
        <Text weight="bold">Pro Mouse</Text>
        <Text>Zero-lag wireless</Text>
      </Flex>
    </CheckboxCards.Item>
    <CheckboxCards.Item value="3">
      <Flex direction="column" width="100%">
        <Text weight="bold">Lightning Mat</Text>
        <Text>Wireless charging</Text>
      </Flex>
    </CheckboxCards.Item>
  </CheckboxCards.Root>
</Box>

API リファレンス

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

ルート

プロパティ	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "classic"`	`"surface"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし
`columns`	`Responsive<enum \| string>`	`"repeat(auto-fit, minmax(200px, 1fr))"`
`gap`	`Responsive<enum \| string>`	`"4"`

アイテム

例

サイズ

利用規約に同意する

<Flex align="center" gap="3">
  <CheckboxCards.Root defaultValue={['1']} size="1">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} size="2">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} size="3">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>

バリアント

利用規約に同意する

<Flex direction="column" gap="3" maxWidth="200px">
  <CheckboxCards.Root defaultValue={['1']} variant="surface">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} variant="classic">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>

色

利用規約に同意する

<Flex direction="column" gap="3" maxWidth="200px">
  <CheckboxCards.Root defaultValue={['1']} color="indigo">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="cyan">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="orange">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="crimson">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>

ハイコントラスト

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

<Grid columns="2" gap="3" display="inline-grid">
  <CheckboxCards.Root defaultValue={['1']} color="indigo">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="indigo" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="cyan">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="cyan" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="orange">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="orange" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="crimson">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={['1']} color="crimson" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Grid>

無効

オフオン

<Flex direction="column" gap="4" maxWidth="450px">
  <CheckboxCards.Root columns="2" defaultValue="2">
    <CheckboxCards.Item value="1">Off</CheckboxCards.Item>
    <CheckboxCards.Item value="2">On</CheckboxCards.Item>
  </CheckboxCards.Root>

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

チェックボックスカード

API リファレンス

ルート

アイテム

例

サイズ

バリアント

色

ハイコントラスト

無効