ラジオカード

一度に一つだけ選択できるインタラクティブなカードのセットです。

ソースコードを見る問題を報告する Playgroundで確認

<Box maxWidth="600px">
  <RadioCards.Root defaultValue="1" columns={{ initial: '1', sm: '3' }}>
    <RadioCards.Item value="1">
      <Flex direction="column" width="100%">
        <Text weight="bold">8-core CPU</Text>
        <Text>32 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
    <RadioCards.Item value="2">
      <Flex direction="column" width="100%">
        <Text weight="bold">6-core CPU</Text>
        <Text>24 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
    <RadioCards.Item value="3">
      <Flex direction="column" width="100%">
        <Text weight="bold">4-core CPU</Text>
        <Text>16 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
  </RadioCards.Root>
</Box>

APIリファレンス

このコンポーネントはRadio Group プリミティブからプロパティを継承し、一般的なマージンプロパティをサポートしています。

ルート

プロパティ	型	デフォルト値
`asChild`	`ブール値`	デフォルト値なし
`size`	`レスポンシブ<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "classic"`	`"surface"`
`color`	`列挙型`	デフォルト値なし
`highContrast`	`ブール値`	デフォルト値なし
`columns`	`レスポンシブ<列挙型 \| 文字列>`	`"repeat(auto-fit, minmax(160px, 1fr))"`
`gap`	`レスポンシブ<列挙型 \| 文字列>`	`"4"`

アイテム

グループ内でチェックできるアイテム。

例

サイズ

sizeプロパティを使用してサイズを制御します。

<Flex align="center" gap="3">
  <RadioCards.Root size="1">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root size="2">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root size="3">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

バリアント

variantプロパティを使用して視覚的なスタイルを制御します。

<Flex direction="column" gap="3" maxWidth="200px">
  <RadioCards.Root variant="surface">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root variant="classic">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

カラー

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

<Flex direction="column" gap="3" maxWidth="200px">
  <RadioCards.Root defaultValue="1" color="indigo">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="cyan">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="orange">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="crimson">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

高コントラスト

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

<Grid columns="2" gap="3" display="inline-grid">
  <RadioCards.Root defaultValue="1" color="indigo">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="indigo" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="cyan">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="cyan" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="orange">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="orange" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="crimson">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="crimson" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Grid>

無効

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

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

前へRadio Group

次へScroll Area

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

ラジオカード