Radio group

多选一。每个单选按钮与复选框一样，是一个小号斜切凹槽；选中项内嵌一块强调色斜切块，如同 Tabs 的斜切块嵌在轨道中。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/radio-group

示例

三个班次选其一

DawnDayNightClosed for repairs

radio-group-basic.tsx

import { RadioGroup, RadioGroupItem } from "@/components/zero/radio-group";const shifts = [  { value: "dawn", label: "Dawn" },  { value: "day", label: "Day" },  { value: "night", label: "Night" },];export default function RadioGroupBasic() {  return (    <RadioGroup defaultValue="night" aria-label="Shift">      {shifts.map((shift) => (        <label key={shift.value} className="flex items-center gap-2.5">          <RadioGroupItem value={shift.value} />          {shift.label}        </label>      ))}      <label className="flex items-center gap-2.5 text-zero-text-3">        <RadioGroupItem value="closed" disabled />        Closed for repairs      </label>    </RadioGroup>  );}

行为

复选框选中时整体填充，单选按钮选中时内嵌斜切块，两者因此不会混淆。斜切块带回弹弹入。

按方向键可在组内切换选中项。每个单选按钮应与其文字一同包在 <label> 中。

属性

RadioGroup

属性	类型	默认值	说明
value	string	—	选中的值（受控），配合 onValueChange 使用。
defaultValue	string	—	默认选中的值（非受控）。

另可传入 Base UI RadioGroup 的全部属性。

RadioGroupItem

属性	类型	默认值	说明
value	string	—	该单选按钮对应的值。

另可传入 Base UI Radio.Root 的全部属性。