Radio 单选框

在一组备选项中进行单选

WARNING

label 作为 value 来使用已经被废弃, 建议label 只用来表示展示的文字，这个被废弃的用法将会在 3.0.0 版本被移除，请考虑使用新 API 替换.

TIP

新的 API value 已在 2.6.0 版本添加，文档中的示例都将使用 value。如果您使用的版本低于 2.6.0，请参考：

基础用法

单选框不应该有太多的可选项，如果你有很多的可选项你应该使用选择框而不是单选框。

要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio value属性的值， value可以是String、Number 或 Boolean。

export function RadioBasic() {  const [radio1, setRadio1] = useState<RadioValue>("1");  const [radio2, setRadio2] = useState<RadioValue>("1");  const [radio3, setRadio3] = useState<RadioValue>("1");  return (    <>      <div style={{ marginBottom: 8, marginLeft: 16 }}>        <ElRadioGroup value={radio1} onChange={setRadio1}>          <ElRadio value="1" size="large">Option 1</ElRadio>          <ElRadio value="2" size="large">Option 2</ElRadio>        </ElRadioGroup>      </div>      <div style={{ margin: "8px 0 8px 16px" }}>        <ElRadioGroup value={radio2} onChange={setRadio2}>          <ElRadio value="1">Option 1</ElRadio>          <ElRadio value="2">Option 2</ElRadio>        </ElRadioGroup>      </div>      <div style={{ margin: "16px 0 16px 16px" }}>        <ElRadioGroup value={radio3} onChange={setRadio3}>          <ElRadio value="1" size="small">Option 1</ElRadio>          <ElRadio value="2" size="small">Option 2</ElRadio>        </ElRadioGroup>      </div>    </>  );}

禁用状态

disabled 属性可以用来控制单选框的禁用状态。

你只需要为单选框设置 disabled 属性就能控制其禁用状态。

Option AOption B

export function RadioDisabled() {  return (    <>      <ElRadio checked={false} disabled value="disabled">        Option A      </ElRadio>      <ElRadio checked disabled value="selected and disabled">        Option B      </ElRadio>    </>  );}

单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组，为 el-radio-group 绑定 v-model，再为每一个 el-radio 设置好 label 属性即可，另外，还可以通过 change 事件来响应变化，它会传入一个参数 value 来表示改变之后的值。

export function RadioBasic() {  const [radio1, setRadio1] = useState<RadioValue>("1");  const [radio2, setRadio2] = useState<RadioValue>("1");  const [radio3, setRadio3] = useState<RadioValue>("1");  return (    <>      <div style={{ marginBottom: 8, marginLeft: 16 }}>        <ElRadioGroup value={radio1} onChange={setRadio1}>          <ElRadio value="1" size="large">Option 1</ElRadio>          <ElRadio value="2" size="large">Option 2</ElRadio>        </ElRadioGroup>      </div>      <div style={{ margin: "8px 0 8px 16px" }}>        <ElRadioGroup value={radio2} onChange={setRadio2}>          <ElRadio value="1">Option 1</ElRadio>          <ElRadio value="2">Option 2</ElRadio>        </ElRadioGroup>      </div>      <div style={{ margin: "16px 0 16px 16px" }}>        <ElRadioGroup value={radio3} onChange={setRadio3}>          <ElRadio value="1" size="small">Option 1</ElRadio>          <ElRadio value="2" size="small">Option 2</ElRadio>        </ElRadioGroup>      </div>    </>  );}

带有边框

设置 border 属性为 true 可以渲染为带有边框的单选框。

export function RadioBorder() {  const [radio1, setRadio1] = useState<RadioValue>("1");  const [radio2, setRadio2] = useState<RadioValue>("1");  const [radio3, setRadio3] = useState<RadioValue>("1");  const [radio4, setRadio4] = useState<RadioValue>("1");  return (    <>      <div>        <ElRadioGroup value={radio1} onChange={setRadio1}>          <ElRadio value="1" size="large" border>Option A</ElRadio>          <ElRadio value="2" size="large" border>Option B</ElRadio>        </ElRadioGroup>      </div>      <div style={spacedRow}>        <ElRadioGroup value={radio2} onChange={setRadio2}>          <ElRadio value="1" border>Option A</ElRadio>          <ElRadio value="2" border>Option B</ElRadio>        </ElRadioGroup>      </div>      <div style={spacedRow}>        <ElRadioGroup value={radio3} onChange={setRadio3} size="small">          <ElRadio value="1" border>Option A</ElRadio>          <ElRadio value="2" border disabled>Option B</ElRadio>        </ElRadioGroup>      </div>      <div style={spacedRow}>        <ElRadioGroup value={radio4} onChange={setRadio4} size="small" disabled>          <ElRadio value="1" border>Option A</ElRadio>          <ElRadio value="2" border>Option B</ElRadio>        </ElRadioGroup>      </div>    </>  );}

Options 属性 2.11.2

基础用法 el-radio-group 的快捷示例。您可以通过 props 属性自定义 options 的别名。

Option AOption BOption C

export function RadioOptions() {  const [value, setValue] = useState<RadioValue>(3);  return (    <ElRadioGroup      value={value}      onChange={setValue}      options={OPTIONS}      optionProps={OPTION_PROPS}    />  );}

单选按钮

带有按钮组视觉效果的单选框

只需要把 el-radio 元素换成 el-radio-button 元素即可， :::demo 您可以使用 填充 和 文本颜色 设置按钮的样式。

export function RadioButton() {  const [radio, setRadio] = useState<RadioValue>("New York");  return (    <>      <div>        <ElRadioGroup          value={radio}          onChange={setRadio}          size="large"          fill="#409eff"        >          <ElRadio button value="New York">New York</ElRadio>          <ElRadio button value="Washington">Washington</ElRadio>          <ElRadio button value="Los Angeles">Los Angeles</ElRadio>          <ElRadio button value="Chicago">Chicago</ElRadio>        </ElRadioGroup>      </div>      <div style={spacedRow}>        <ElRadioGroup          value={radio}          onChange={setRadio}          textColor="#fff"          fill="#6c6cff"        >          <ElRadio button value="New York">New York</ElRadio>          <ElRadio button value="Washington">Washington</ElRadio>          <ElRadio button value="Los Angeles">Los Angeles</ElRadio>          <ElRadio button value="Chicago">Chicago</ElRadio>        </ElRadioGroup>      </div>      <div style={spacedRow}>        <ElRadioGroup value={radio} onChange={setRadio} size="small">          <ElRadio button value="New York">New York</ElRadio>          <ElRadio button value="Washington" disabled>Washington</ElRadio>          <ElRadio button value="Los Angeles">Los Angeles</ElRadio>          <ElRadio button value="Chicago">Chicago</ElRadio>        </ElRadioGroup>      </div>    </>  );}

尺寸

通过 size 属性控制尺寸。

export function RadioSizes() {  const [radio1, setRadio1] = useState<RadioValue>("1");  const [radio2, setRadio2] = useState<RadioValue>("1");  const [radio3, setRadio3] = useState<RadioValue>("1");  return (    <div style={stack}>      <ElRadioGroup value={radio1} onChange={setRadio1} size="large">        <ElRadio value="1">Option 1</ElRadio>        <ElRadio value="2">Option 2</ElRadio>      </ElRadioGroup>      <ElRadioGroup value={radio2} onChange={setRadio2}>        <ElRadio value="1">Option 1</ElRadio>        <ElRadio value="2">Option 2</ElRadio>      </ElRadioGroup>      <ElRadioGroup value={radio3} onChange={setRadio3} size="small">        <ElRadio value="1">Option 1</ElRadio>        <ElRadio value="2">Option 2</ElRadio>      </ElRadioGroup>    </div>  );}

Radio API

Radio Attributes

属性名	说明	类型	默认值
value	本选项的值，与 group 的 value 相等时选中	`string` / `number` / `boolean`	—
checked	脱离 group 独立使用时的选中态	`boolean`	false
label	显示文案，也可直接用 children	`string` / `ReactNode`	—
disabled	是否禁用	`boolean`	false
border	是否显示边框	`boolean`	false
size	尺寸	`enum`	—
name	原生 name 属性	`string`	—
button	button 形态，组内由 group 的 type 决定	`boolean`	—

Radio Events

事件名	说明	参数
onCheckedChange	独立使用时选中态变化	`Function`

Radio Slots

插槽名	说明	React 写法
default	自定义单选框文案	`children` / `label`

RadioGroup Attributes

属性名	说明	类型	默认值
id	容器 id	`string`	—
aria-label	无障碍标签	`string`	radio-group
value	当前选中值	`string` / `number` / `boolean`	—
disabled	是否禁用组内所有单选框	`boolean`	false
size	尺寸	`enum`	—
name	原生 name 属性	`string`	—
fill	button 形态选中态的背景色	`string`	—
text-color	button 形态选中态的字体色	`string`	—
type	渲染形态	`enum`	radio
options	数据化渲染选项	`array`	—
option-props	选项字段别名	`object`	—

RadioGroup Events

事件名	说明	参数
onChange	选中值变化	`Function`

RadioGroup Slots

插槽名	说明	子标签
default	自定义选项内容；不传时按 options 渲染	Radio