Radio

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Radio } from "@hua-labs/hua";


`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Radio button size
`name*`	`string`	-	Group name for radio buttons
`value*`	`string`	-	Value of this radio option
`label`	`string`	-	Label text displayed next to radio
`description`	`string`	-	Additional description below label
`error`	`boolean`	`false`	Error state indicator
`success`	`boolean`	`false`	Success state indicator
`disabled`	`boolean`	`false`	Disables the radio button

docs:common.basicUsage

import { Radio } from '@hua-labs/hua';

<Radio name="option" value="1" label="Option 1" />
<Radio name="option" value="2" label="Option 2" />
<Radio name="option" value="3" label="Option 3" />

With Description

<Radio
  name="plan"
  value="free"
  label="Free"
  description="Basic features for personal use"
/>
<Radio
  name="plan"
  value="pro"
  label="Pro"
  description="Advanced features for professionals"
/>

Controlled

const [selected, setSelected] = useState("free");

<Radio
  name="plan"
  value="free"
  label="Free"
  checked={selected === "free"}
  onChange={() => setSelected("free")}
/>
<Radio
  name="plan"
  value="pro"
  label="Pro"
  checked={selected === "pro"}
  onChange={() => setSelected("pro")}
/>

•Radio Role: Uses native radio input for proper semantics
•Group Navigation: Arrow keys navigate within radio group
•aria-checked: Reflects selection state for screen readers
•Name Grouping: Same name attribute groups radios logically

Checkbox Select