Radio

A styled native radio button, with an optional group wrapper.

Default

RadioGroup groups related radio buttons and manages the selected value.

FreeProTeam

tsx

import { RadioGroup, Radio } from "@hummingbirdui/react";

export default function RadioDefault() {
  return (
    <RadioGroup name="plan" defaultValue="pro" className="flex flex-col gap-2">
      <Radio value="free" label="Free" />
      <Radio value="pro" label="Pro" />
      <Radio value="team" label="Team" />
    </RadioGroup>
  );
}

Colors

The color prop offers primary (default), secondary, success, info, warning, danger, and neutral.

tsx

import { Radio } from "@hummingbirdui/react";

export default function RadioColors() {
  return (
    <div className="flex flex-col gap-2">
      <Radio name="c-primary" color="primary" label="Primary" defaultChecked />
      <Radio name="c-secondary" color="secondary" label="Secondary" defaultChecked />
      <Radio name="c-success" color="success" label="Success" defaultChecked />
      <Radio name="c-info" color="info" label="Info" defaultChecked />
      <Radio name="c-warning" color="warning" label="Warning" defaultChecked />
      <Radio name="c-danger" color="danger" label="Danger" defaultChecked />
      <Radio name="c-neutral" color="neutral" label="Neutral" defaultChecked />
    </div>
  );
}

Sizes

The size prop offers three sizes: sm (default), md, and lg.

SmallMediumLarge

tsx

import { RadioGroup, Radio } from "@hummingbirdui/react";

export default function RadioSizes() {
  return (
    <RadioGroup name="size" defaultValue="md" className="flex flex-col gap-2">
      <Radio value="sm" size="sm" label="Small" />
      <Radio value="md" size="md" label="Medium" />
      <Radio value="lg" size="lg" label="Large" />
    </RadioGroup>
  );
}

Inline

The inline prop lays fields out in a row.

MonthlyYearly

tsx

import { RadioGroup, Radio } from "@hummingbirdui/react";

export default function RadioInline() {
  return (
    <RadioGroup name="billing" defaultValue="monthly">
      <Radio inline value="monthly" label="Monthly" />
      <Radio inline value="yearly" label="Yearly" />
    </RadioGroup>
  );
}

Disabled

FreePro (unavailable)

tsx

import { RadioGroup, Radio } from "@hummingbirdui/react";

export default function RadioDisabled() {
  return (
    <RadioGroup name="plan-disabled" defaultValue="free" className="flex flex-col gap-2">
      <Radio value="free" label="Free" />
      <Radio value="pro" label="Pro (unavailable)" disabled />
    </RadioGroup>
  );
}

API Reference

Radio

Prop	Type	Default	Description
color	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "danger" \| "neutral"`	`"primary"`	Color theme of the radio.
size	`"sm" \| "md" \| "lg"`	`"sm"`	Size of the radio.
label	`React.ReactNode`	—	Text rendered beside the control, wrapped in a clickable label.
inline	`boolean`	`false`	Lay the field out inline.
className	`string`	—	Additional classes merged with the generated classes.

RadioGroup

Prop	Type	Default	Description
name	`string`	—	Shared name applied to every radio in the group.
value	`string`	—	Controlled selected value.
defaultValue	`string`	—	Uncontrolled initial value.
onValueChange	`(value: string) => void`	—	Fires with the newly selected value.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React radio is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available radio classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousCheckbox NextSwitch