单选框

在一组相关且互斥数据中，用户仅能选择一个选项。

导入

import { Radio, RadioGroup } from "@resolid/react-ui";

用法

颜色

大小

<RadioGroup defaultValue={"md"} name="radioSizes">
  <Radio size={"xs"} value={"xs"}>
    XS
  </Radio>
  <Radio size={"sm"} value={"sm"}>
    SM
  </Radio>
  <Radio value={"md"}>MD</Radio>
  <Radio size={"lg"} value={"lg"}>
    LG
  </Radio>
  <Radio size={"xl"} value={"xl"}>
    XL
  </Radio>
</RadioGroup>

颜色

<RadioGroup defaultValue={"primary"} name="radioColors">
  <Radio value={"primary"}>Primary</Radio>
  <Radio color={"success"} value={"success"}>
    Success
  </Radio>
  <Radio color={"warning"} value={"warning"}>
    Warning
  </Radio>
  <Radio color={"danger"} value={"danger"}>
    Danger
  </Radio>
  <Radio color={"neutral"} value={"neutral"}>
    Neutral
  </Radio>
</RadioGroup>

单选框组

你选中的值: 
const [checkedValue, setCheckedValue] = useState("");

return (
  <div className={"flex flex-col gap-2"}>
    <RadioGroup
      name={"radioGroup"}
      value={checkedValue}
      onChange={(value) => {
        setCheckedValue(value);
      }}
    >
      <div className={"flex flex-row gap-5"}>
        <Radio value={"选择框一"}>选择框一</Radio>
        <Radio value={"选择框二"}>选择框二</Radio>
        <Radio value={"选择框三"}>选择框三</Radio>
        <Radio value={"选择框四"}>选择框四</Radio>
      </div>
    </RadioGroup>
    <div>你选中的值: {checkedValue}</div>
  </div>
);

关于名称的注意事项

我们建议把名字道具传给 RadioGroup 组件，而不是传给每个 Radio 组件。默认情况下，RadioGroup 的名称道具是优先的。

// 应该这样做 ✅
<RadioGroup name="form-name">
  <Radio value={1}>Radio 1</Radio>
  <Radio value={2}>Radio 2</Radio>
</RadioGroup>


// 不要这样做 ❌
<RadioGroup >
  <Radio name="form-name">Radio 1</Radio>
  <Radio name="form-name">Radio 2</Radio>
</RadioGroup>

属性

单选框

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false
属性disabled类型boolean默认值false必须false
属性value类型string | number默认值-必须false
属性required类型boolean默认值false必须false
属性invalid类型boolean默认值false必须false
属性spacing类型string | number默认值'0.5em'必须false
属性onChange类型(checked: boolean) => void默认值-必须false

单选框组

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false
属性disabled类型boolean默认值false必须false
属性name类型string默认值-必须false
属性value类型string | number默认值-必须false
属性defaultValue类型string | number默认值-必须false
属性onChange类型((value: string | number) => void)默认值-必须false