ラジオグループ

デフォルト快適コンパクト

<RadioGroup.Root defaultValue="1" name="example">
  <RadioGroup.Item value="1">Default</RadioGroup.Item>
  <RadioGroup.Item value="2">Comfortable</RadioGroup.Item>
  <RadioGroup.Item value="3">Compact</RadioGroup.Item>
</RadioGroup.Root>

APIリファレンス

ルート

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

アイテム

例

サイズ

sizeプロパティを使用して、ラジオボタンのサイズを制御します。

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

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

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

バリアント

variantプロパティを使用して、ラジオボタンの視覚スタイルを制御します。

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

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

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

色

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

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

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

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

高コントラスト

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

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

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

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

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

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

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

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

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

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

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

配置

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

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

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

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

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

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

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

無効

ネイティブのdisabled属性を使用して、無効なラジオボタンを作成します。

オフオン

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

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

APIリファレンス

ルート

アイテム

例

サイズ

バリアント

色

高コントラスト

配置

無効