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 { Radio, RadioGroup } 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 { Radio, RadioGroup } 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 { Radio, RadioGroup } 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 { Radio, RadioGroup } 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
`color`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "danger" \| "neutral"`	`"primary"`
`size`	`"sm" \| "md" \| "lg"`	`"sm"`
`label`	`React.ReactNode`	—
`inline`	`boolean`	`false`
`className`	`string`	—

RadioGroup

Prop	Type	Default
`name`	`string`	—
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(value: string) => void`	—
`className`	`string`	—

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