twenty/packages/twenty-docs/l/zh/twenty-ui/input/radio.mdx

---
title: 单选按钮
image: /images/user-guide/create-workspace/workspace-cover.png
---

<Frame>
  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="标题" />
</Frame>

当用户只能从一系列选项中选择一个时使用。

<Tabs>
<Tab title="**用法**">

```jsx
import { Radio } from "twenty-ui/display";

export const MyComponent = () => {

  const handleRadioChange = (event) => {
    console.log("Radio button changed:", event.target.checked);
  };

  const handleCheckedChange = (checked) => {
    console.log("Checked state changed:", checked);
  };


  return (
    <Radio
      checked={true}
      value="Option 1"
      onChange={handleRadioChange}
      onCheckedChange={handleCheckedChange}
      size="large"
      disabled={false}
      labelPosition="right"
    />
  );
};
```


</Tab>
<Tab title="属性">


| 属性              | 类型             | 描述                              |
| --------------- | -------------- | ------------------------------- |
| 样式              | `React.CSS` 属性 | 组件的附加行内样式                       |
| 类名              | string         | 用于额外样式的可选 CSS 类                 |
| 选中              | 布尔值            | 指示单选按钮是否被选中                     |
| 值               | string         | 与单选按钮相关联的标签或文本                  |
| onChange        | 函数             | 选择的单选按钮改变时调用的函数                 |
| onCheckedChange | 函数             | 当单选按钮的 `checked` 状态改变时调用的函数     |
| 大小              | 字符串            | 单选按钮的尺寸。 选项包括：`大` 和 `小`         |
| 禁用              | 布尔值            | 如果为 `true`，则单选按钮将被禁用且不可点击       |
| 标签位置            | 字符串            | 标签文字相对于单选按钮的位置。 有两个选项：`左` 和 `右` |




</Tab>
</Tabs>

## 单选按钮组

将相关的单选按钮组合在一起。

<Tabs>
<Tab title="用法">

```jsx
import React, { useState } from "react";
import { Radio, RadioGroup } from "twenty-ui/display";

export const MyComponent = () => {

  const [selectedValue, setSelectedValue] = useState("Option 1");

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };
  
  return (
    <RadioGroup value={selectedValue} onChange={handleChange}>
      <Radio value="Option 1" />
      <Radio value="Option 2" />
      <Radio value="Option 3" />
    </RadioGroup>
  );
};

```

</Tab>
<Tab title="属性">


| 属性            | 类型                | 描述                               |
| ------------- | ----------------- | -------------------------------- |
| 值             | 字符串               | 当前选中单选按钮的值                       |
| onChange      | function          | 当单选按钮改变时触发的回调函数                  |
| onValueChange | 函数                | 当组中选定的值发生变化时触发的回调函数。             |
| 子元素           | `React.ReactNode` | 允许您将 React 组件（如单选按钮）作为子项传递给单选按钮组 |




</Tab>

</Tabs>