Radio

Misc

Single radio button — compose into RadioGroup for selection.

Single radio button — always use inside a RadioGroup or RadioRoot for proper name/value semantics. The indicator is a square shell with a Neo Green fill square, matching the brand's hard-edge aesthetic.

Usage

import { RadioGroup, Radio } from "nosible-ux"

export default function Example() {
  return (
    <RadioGroup defaultValue="daily">
      <Radio value="daily" label="Daily digest" />
      <Radio value="realtime" label="Real-time alerts" />
    </RadioGroup>
  )
}

Examples

With descriptions

Daily digest

One summary email each morning

Real-time

Alert on every signal match

Weekly

Weekend summary only

Accessibility

Renders a button element with role="radio" via Radix. Group handles arrow-key navigation and name association. Label is linked via htmlFor.

Props

Name	Type	Default	Description
`asChild`	`boolean \| undefined`	`false`	Whether to render the component using its child as the root element.
`checked`	`boolean \| undefined`	—
`description`	`ReactNode`	—	Supporting text rendered below the label in text-text-muted.
`error`	`ReactNode`	—	Error message shown below description in critical red. Sets aria-invalid.
`label`	`ReactNode`	—	Visible label rendered to the right of the indicator.
`required`	`boolean \| undefined`	—	Marks the field as required. Sets aria-required.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Visual and interaction size.
`value`	`string`	—

← All Components Getting Started →