单选框组

查看源代码

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

导入

import { RadioGroup, Radio } from "@resolid/react-ui";
  • RadioGroup: 单选框组
  • Radio: 单选框，必须在 RadioGroup 内部使用

演示

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

export default function App() {
  return (
    <RadioGroup name={"frameworksRadioGroup"} className={"flex flex-row items-center gap-5"}>
      <Radio value={"React"}>React</Radio>
      <Radio value={"Angular"}>Angular</Radio>
      <Radio value={"Vue"}>Vue</Radio>
      <Radio value={"SolidJS"}>SolidJS</Radio>
      <Radio value={"Svelte"}>Svelte</Radio>
    </RadioGroup>
  );
}

举例

可控

使用 RadioGroup 组件的 value 和 onChange 属性来控制选定的单选项目

你选择的框架是: 

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

export default function App() {
  const [value, setValue] = useState("");

  return (
    <div className={"flex flex-col gap-2"}>
      <p>你选择的框架是: {value}</p>
      <RadioGroup
        name={"frameworksRadioGroup"}
        value={value}
        onChange={setValue}
        className={"flex flex-row items-center gap-5"}
      >
        <Radio value={"React"}>React</Radio>
        <Radio value={"Angular"}>Angular</Radio>
        <Radio value={"Vue"}>Vue</Radio>
        <Radio value={"SolidJS"}>SolidJS</Radio>
        <Radio value={"Svelte"}>Svelte</Radio>
      </RadioGroup>
    </div>
  );
}

大小

通过传递 size 属性来更改单选框的大小，单选框支持 xs、sm、md、lg 和 xl 这些大小。

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

export default function App() {
  return (
    <RadioGroup
      name={"sizesRadioGroup"}
      defaultValue={"md"}
      className={"flex flex-row items-center gap-5"}
    >
      <Radio value={"xs"} size={"xs"}>
        XS
      </Radio>
      <Radio value={"sm"} size={"sm"}>
        SM
      </Radio>
      <Radio value={"md"}>MD</Radio>
      <Radio value={"lg"} size={"lg"}>
        LG
      </Radio>
      <Radio value={"xl"} size={"xl"}>
        XL
      </Radio>
    </RadioGroup>
  );
}

颜色

通过传递 color 属性来更改单选框的颜色，单选框支持 primary、secondary、success、warning、danger 和 neutral 这些颜色。

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

export default function App() {
  return (
    <RadioGroup
      name={"colorsRadioGroup"}
      defaultValue={"secondary"}
      className={"flex flex-row items-center gap-5"}
    >
      <Radio value={"primary"} color={"primary"}>
        Primary
      </Radio>
      <Radio value={"secondary"} color={"secondary"}>
        Secondary
      </Radio>
      <Radio value={"success"} color={"success"}>
        Success
      </Radio>
      <Radio value={"warning"} color={"warning"}>
        Warning
      </Radio>
      <Radio value={"danger"} color={"danger"}>
        Danger
      </Radio>
      <Radio value={"neutral"} color={"neutral"}>
        Neutral
      </Radio>
    </RadioGroup>
  );
}

属性

RadioGroup

属性color简介

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"primary"必须false
属性size简介

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false
属性disabled简介

是否禁用

类型boolean默认值false必须false
属性name简介

单选中输入字段的名称

类型string默认值-必须false
属性readOnly简介

是否只读

类型boolean默认值false必须false
属性required简介

是否必选

类型boolean默认值false必须false
属性invalid简介

是否无效

类型boolean默认值false必须false
属性value简介

值

类型string | number默认值-必须false
属性defaultValue简介

默认值

类型string | number默认值-必须false
属性onChange简介

onChange 回调

类型((value: string | number) => void)默认值-必须false
属性orientation简介

方向

类型"horizontal" | "vertical"默认值'horizontal'必须false

Radio

属性value简介

值

类型string | number默认值-必须true
属性color简介

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"primary"必须false
属性size简介

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false
属性disabled简介

是否禁用

类型boolean默认值false必须false
属性spacing简介

间距

类型string | number默认值"0.5em"必须false

建议更改此页面