# 单选按钮

可在任何布局中使用的独立单选按钮。

```jsx
<Flex align="start" direction="column" gap="1">
  <Flex asChild gap="2">
    <Text as="label" size="2">
      <Radio name="example" value="1" defaultChecked />
      默认
    </Text>
  </Flex>

  <Flex asChild gap="2">
    <Text as="label" size="2">
      <Radio name="example" value="2" />
      舒适
    </Text>
  </Flex>

  <Flex asChild gap="2">
    <Text as="label" size="2">
      <Radio name="example" value="3" />
      紧凑
    </Text>
  </Flex>
</Flex>
```

## [API 参考](#api-参考)

此组件基于 `input` 元素，并支持[常见的 margin 属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                               | Default          |
| -------------- | ---------------------------------- | ---------------- |
| `size`         | `Responsive<"1" \| "2" \| "3">`    | `"2"`            |
| `variant`      | `"classic" \| "surface" \| "soft"` | `"surface"`      |
| `color`        | `enum`                             | No default value |
| `highContrast` | `boolean`                          | No default value |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制单选按钮的大小。

```jsx
<Flex align="center" gap="4">
  <Flex gap="2">
    <Radio size="1" name="size-1" value="1" defaultChecked />

    <Radio size="1" name="size-1" value="2" />
  </Flex>

  <Flex gap="2">
    <Radio size="2" name="size-2" value="1" defaultChecked />

    <Radio size="2" name="size-2" value="2" />
  </Flex>

  <Flex gap="2">
    <Radio size="3" name="size-3" value="1" defaultChecked />

    <Radio size="3" name="size-3" value="2" />
  </Flex>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性来控制单选按钮的视觉风格。

```jsx
<Flex align="center" gap="4">
  <Flex gap="2">
    <Radio variant="surface" name="surface" value="1" defaultChecked />

    <Radio variant="surface" name="surface" value="2" />
  </Flex>

  <Flex gap="2">
    <Radio variant="classic" name="classic" value="1" defaultChecked />

    <Radio variant="classic" name="classic" value="2" />
  </Flex>

  <Flex gap="2">
    <Radio variant="soft" name="soft" value="1" defaultChecked />

    <Radio variant="soft" name="soft" value="2" />
  </Flex>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性来指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex as="span" gap="2">
  <Radio color="indigo" defaultChecked />

  <Radio color="cyan" defaultChecked />

  <Radio color="orange" defaultChecked />

  <Radio color="crimson" defaultChecked />
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性来增加与背景的颜色对比度。

```jsx
<Grid columns="5" display="inline-grid" gap="2">
  <Radio color="indigo" defaultChecked />

  <Radio color="cyan" defaultChecked />

  <Radio color="orange" defaultChecked />

  <Radio color="crimson" defaultChecked />

  <Radio color="gray" defaultChecked />

  <Radio color="indigo" defaultChecked highContrast />

  <Radio color="cyan" defaultChecked highContrast />

  <Radio color="orange" defaultChecked highContrast />

  <Radio color="crimson" defaultChecked highContrast />

  <Radio color="gray" defaultChecked highContrast />
</Grid>
```

### [对齐](#对齐)

在 `Text` 中组合 `Radio` 会自动将其与第一行文本居中对齐。对于多行文本也会自动对齐良好。

```jsx
<Flex direction="column" gap="3">
  <Flex align="start" direction="column" gap="1">
    <Flex asChild gap="2">
      <Text as="label" size="2">
        <Radio size="1" name="alignment-1" value="1" defaultChecked />
        默认
      </Text>
    </Flex>

    <Flex asChild gap="2">
      <Text as="label" size="2">
        <Radio size="1" name="alignment-1" value="2" />
        紧凑
      </Text>
    </Flex>
  </Flex>

  <Flex align="start" direction="column" gap="1">
    <Flex asChild gap="2">
      <Text as="label" size="3">
        <Radio size="2" name="alignment-2" value="1" defaultChecked />
        默认
      </Text>
    </Flex>

    <Flex asChild gap="2">
      <Text as="label" size="3">
        <Radio size="2" name="alignment-2" value="2" />
        紧凑
      </Text>
    </Flex>
  </Flex>

  <Flex align="start" direction="column" gap="1">
    <Flex asChild gap="2">
      <Text as="label" size="4">
        <Radio size="3" name="alignment-3" value="1" defaultChecked />
        默认
      </Text>
    </Flex>

    <Flex asChild gap="2">
      <Text as="label" size="4">
        <Radio size="3" name="alignment-3" value="2" />
        紧凑
      </Text>
    </Flex>
  </Flex>
</Flex>
```

### [禁用](#禁用)

使用原生 `disabled` 属性来创建一个禁用的单选按钮。

```jsx
<Flex direction="column" gap="3">
  <Flex align="start" direction="column" gap="1">
    <Flex asChild gap="2">
      <Text as="label" size="2">
        <Radio name="enabled" value="1" defaultChecked />开
      </Text>
    </Flex>

    <Flex asChild gap="2">
      <Text as="label" size="2">
        <Radio name="enabled" value="2" />关
      </Text>
    </Flex>
  </Flex>

  <Flex align="start" direction="column" gap="1">
    <Flex asChild gap="2">
      <Text as="label" size="2" color="gray">
        <Radio disabled name="disabled" value="1" defaultChecked />开
      </Text>
    </Flex>

    <Flex asChild gap="2">
      <Text as="label" size="2" color="gray">
        <Radio disabled name="disabled" value="2" />关
      </Text>
    </Flex>
  </Flex>
</Flex>
```

<!--$-->

<!--/$-->