Skip to main content

Radio

在一组备选项中进行单选。

基本用法​

通过 checked 属性设为选中状态。

function App() {
  return (
    <div className="ykui-demo-row">
      <Radio onChange={(val) => console.log(val)}>normal</Radio>
      <Radio checked onChange={(val) => console.log(val)}>
        checked
      </Radio>
    </div>
  )
}

禁用状态​

通过 disabled 属性设为禁用状态。

function App() {
  return (
    <div className="ykui-demo-column">
      <Radio disabled>禁用</Radio>
    </div>
  )
}

单选框组​

通过 Radio.Group 添加单选框组。

function App() {
  const [value, setValue] = useState('')

  return (
    <Radio.Group
      value={value}
      onChange={(val) => {
        setValue(val)
      }}
    >
      <Radio label="man" value="man" />
      <Radio label="women" value="women" />
    </Radio.Group>
  )
}

自定义单项框组内容​

可通过 data 属性传入单选框组内容。

function App() {
  return (
    <div className="ykui-demo-column">
      <Radio.Group>
        <div className="kf-ai-input-wrapper">
          <Radio value="语音服务1">语音服务1</Radio>
        </div>
        <div className="kf-ai-input-wrapper">
          <Radio value="在线服务1">在线服务1</Radio>
        </div>
        <div className="kf-ai-input-wrapper">
          <Radio value="工单中心1">工单中心1</Radio>
        </div>
      </Radio.Group>
      <Radio.Group
        data={[
          { label: 'apple', value: 1 },
          { label: 'orange', value: 2 },
          { label: 'Banana', value: 3 },
          { label: 'Cherry', value: 4 }
        ]}
      />
    </div>
  )
}

Radio API​

属性说明类型默认值
children内容ReactNode--
inputClassName类名string--
style样式CSSProperties--
namename 属性string--
checked是否选中boolean--
disabled是否禁用boolean--
onChange值变化时触发Func--

RadioGroup API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
type类型radio〡checkbox--
data组内容GroupDataTypes--
value选中值ValueType--
onChange值变化时触发Func--