Components/Misc/RadioGroup

RadioGroup

Misc

Exclusive radio selection with ARIA roles.

Wraps Radio items with shared value state and keyboard navigation. The group renders a vertical flex column by default.

Usage

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

export default function Example() {
  return (
    <RadioGroup defaultValue="fundamental">
      <RadioGroupItem value="fundamental" label="Fundamental" />
      <RadioGroupItem value="technical" label="Technical" />
      <RadioGroupItem value="macro" label="Macro" />
    </RadioGroup>
  )
}

Examples

Controlled

Accessibility

Radix RadioGroup handles arrow-key navigation between items, role="radiogroup", and aria-checked states.

Props

Name TypeDefaultDescription
asChild
boolean | undefined
defaultValue
string | undefined
dir
Direction | undefined
disabled
boolean | undefined
loop
boolean | undefined
name
string | undefined
onValueChange
((value: string) => void) | undefined
orientation
"horizontal" | "vertical" | undefined
required
boolean | undefined
value
string | null | undefined