Radio Group

One choice out of several. Built on native radio inputs, so arrow-key roving, form submission and the single-selection invariant come from the platform.

src/components/ui/radio-group.tsx

Install

npx astralyx-ui add radio-group

Usage

import { Radio, RadioGroup } from '@/components/ui/radio-group'

<RadioGroup defaultValue="week" onValueChange={setValue}>
  <Radio value="day" label="Every day" />
  <Radio value="week" label="Every week" />
  <Radio value="never" label="Never" />
</RadioGroup>

Composer

Change the props and the source below follows.

tsx

<RadioGroup
  defaultValue="week"
>
  <Radio value="day" label="Every day" />
  <Radio value="week" label="Every week" />
  <Radio value="never" label="Never" />
</RadioGroup>

Examples

Sizes

tsx

<RadioGroup defaultValue="b">
  <Radio value="a" size="sm" label="Small" />
  <Radio value="b" size="default" label="Default" />
  <Radio value="c" size="lg" label="Large" />
</RadioGroup>

Horizontal

tsx

<RadioGroup defaultValue="week" orientation="horizontal">…</RadioGroup>

With descriptions

tsx

<Radio
  value="all"
  label="All activity"
  description="Every comment, mention and status change."
/>

Disabled group

tsx

<RadioGroup defaultValue="week" disabled>…</RadioGroup>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`RadioGroup`

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
defaultValue	string \| number \| readonly string[]	—	Controlled and uncontrolled selection, on RadioGroup.
children	ReactNode	required	—
name	string	—	Shared input name. Generated with useId when omitted, so two groups on a page never collide.
value	string	—	Controlled and uncontrolled selection, on RadioGroup.
onValueChange	(value: string) => void	—	Fires with the chosen value.
disabled	boolean	false	On RadioGroup, disables every item at once.
orientation	'vertical' \| 'horizontal'	'vertical'	Layout direction, also reported as aria-orientation.
responsive	Responsive	'sm'	Breakpoint a horizontal group becomes a row at. Below it the options stack, keeping each label and its control on one line rather than wrapping between them.

`Radio`

Extends Omit<ComponentProps<'input'>, 'size' | 'type' | 'value'>.

Prop	Type	Default	Description
error	boolean	—	—
size	'sm' \| 'default' \| 'lg'	'default'	—
value	string	required	Required. Identifies the option within the group.
label	ReactNode	—	Text beside the dot; the whole row is clickable.
description	ReactNode	—	Text beside the dot; the whole row is clickable.
containerClassName	string	—	—