单选框组

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

演示

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

export default function App() {
  return (
    <RadioGroup name={"frameworksRadioGroup"} className={"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>
  );
}

用法

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

RadioGroup: 单选框组
Radio: 单选框，必须在 RadioGroup 内部使用

特点

遵循 WAI ARIA Radio Group 设计模式。
每个 Radio 都使用本机 HTML <input> 元素构建，该元素在视觉上隐藏以允许自定义样式。
完整的键盘导航。
支持水平/垂直方向。
可以是受控的，也可以是不受控的。

举例

默认值

使用 defaultValue 属性来控制默认选定的单选项目

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

export default function App() {
  return (
    <RadioGroup name={"frameworksRadioGroup"} defaultValue={"React"} className={"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>
  );
}

可控值

使用 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={"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>
  );
}

垂直方向

使用 defaultValue 属性来控制默认选定的单选项目

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

export default function App() {
  return (
    <RadioGroup name={"frameworksRadioGroup"} orientation={"vertical"} className={"gap-3"}>
      <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

属性	类型	默认值	必须
属性color	简介颜色	类型"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral"	默认值"primary"	必须false
属性size	简介大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false
属性orientation	简介方向	类型"horizontal" \| "vertical"	默认值'horizontal'	必须false
属性value	简介可控值	类型string \| number	默认值-	必须false
属性defaultValue	简介默认值	类型string \| number	默认值-	必须false
属性onChange	简介 onChange 回调	类型((value: string \| number) => void)	默认值-	必须false
属性name	简介字段的名称	类型string	默认值-	必须false
属性disabled	简介是否禁用	类型boolean	默认值false	必须false
属性required	简介是否必选	类型boolean	默认值false	必须false
属性readOnly	简介是否只读	类型boolean	默认值false	必须false
属性invalid	简介是否无效	类型boolean	默认值false	必须false

Radio

属性	类型	默认值	必须
属性color	简介颜色	类型"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral"	默认值"primary"	必须false
属性size	简介大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false
属性spacing	简介间距	类型string \| number	默认值"0.5em"	必须false
属性value	简介值	类型string \| number	默认值-	必须true
属性disabled	简介是否禁用	类型boolean	默认值false	必须false

建议更改此页面