RadioGroup

A set of options where exactly one is chosen. Use it when each option needs a sentence of its own, or when every option should be visible at once.

import { Radio, RadioGroup } from 'neba';

<RadioGroup label="Plan" defaultValue="team">
  <Radio value="starter" label="Starter" />
  <Radio value="team" label="Team" />
</RadioGroup>;

Props

RadioGroup

Prop	Type	Default	Description
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Set on the group, inherited by every Radio
orientationshared	'horizontal' | 'vertical'	'vertical'	Which way the options stack. Vertical by default: a row breaks the moment one label is long
label	ReactNode	—	The label, wired to the control by Base UI's Field
description	ReactNode	—	Helper text
error	ReactNode	—	Error message. Its presence turns the control invalid and re-points the colour family at danger
invalid	boolean	!!error	Forces the invalid state without a message, for when a form library owns validity
value	Value	—	The chosen value. Use with onValueChange for a controlled group
defaultValue	Value	—	The initial value, for an uncontrolled group
onValueChange	(value: Value, details) => void	—	Called when the chosen option changes
name	string	—	Identifies the field when a form is submitted
required	boolean	false	One option must be chosen before the form submits
readOnly	boolean	false	Shown but not changeable. Keeps its colour and edge, drains the saturation
disabled	boolean	false	Unavailable. Drops the colour family for neutral grey
children	ReactNode	—	The Radio options
classNames	NebaSlots<'label' | 'control' | 'description' | 'error'>	—	Class names for the parts behind the root. The root itself is className, so there is no root key

value with onValueChange makes it controlled; defaultValue makes it uncontrolled.

Radio

Prop	Type	Default	Description
value *	Value	—	Identifies this option. Speaks the same language as the group’s value
label	ReactNode	—	The text beside the dot
description	ReactNode	—	Helper text under the label
readOnly	boolean	false	Shown but not changeable. Keeps its colour and edge, drains the saturation
disabled	boolean	false	Unavailable. Drops the colour family for neutral grey
classNames	NebaSlots<'label' | 'control' | 'description' | 'indicator'>	—	Class names for the parts behind the root. The root itself is className, so there is no root key

A Radio has no size and no color of its own: set them on RadioGroup and they reach every option.

With many options to fit into little space, use Select; to join two or three into one control, use SegmentedButton.

Examples

description

Each option can carry a sentence. However many lines the description takes, the dot stays aligned to the first line of the label.

import { Radio, RadioGroup } from 'neba';

export default function RadioGroupDescriptions() {
  return (
    <RadioGroup
      label="Deploy target"
      description="You can change this later."
      defaultValue="preview"
    >
      <Radio value="preview" label="Preview" description="A throwaway URL per pull request." />
      <Radio value="staging" label="Staging" description="Shared, and reset every night." />
      <Radio value="production" label="Production" description="Live. Requires an approval." />
    </RadioGroup>
  );
}

orientation

vertical by default. Use horizontal only with short labels: one long label makes the row hard to read.

import { Radio, RadioGroup } from 'neba';

export default function RadioGroupOrientation() {
  return (
    <RadioGroup label="Billing period" orientation="horizontal" defaultValue="yearly">
      <Radio value="monthly" label="Monthly" />
      <Radio value="yearly" label="Yearly" />
      <Radio value="once" label="One-off" />
    </RadioGroup>
  );
}

disabled · readOnly

Both can be set on the group or on an individual Radio. On the group, they reach every option.

import { Radio, RadioGroup } from 'neba';

export default function RadioGroupStates() {
  return (
    <div className="flex flex-wrap gap-10">
      <RadioGroup label="One option is out of reach" defaultValue="starter">
        <Radio value="starter" label="Starter" />
        <Radio value="team" label="Team" />
        <Radio value="enterprise" label="Enterprise" disabled />
      </RadioGroup>

      <RadioGroup label="The whole set is read-only" readOnly defaultValue="team">
        <Radio value="starter" label="Starter" />
        <Radio value="team" label="Team" />
      </RadioGroup>

      <RadioGroup label="Plan" error="Choose a plan to continue.">
        <Radio value="starter" label="Starter" />
        <Radio value="team" label="Team" />
      </RadioGroup>
    </div>
  );
}

classNames

The group and one option are styled separately, because they are two components. On RadioGroup, classNames takes label, control, description and error, where control is the element holding the options: the one carrying the row or column direction. On Radio it takes label, control, indicator and description, where control is the dot.

<RadioGroup label="Plan" classNames={{ control: 'gap-6' }}>
  <Radio value="team" label="Team" classNames={{ control: 'rounded-sm' }} />
</RadioGroup>

There is no error slot on Radio: a validity message belongs to the question, and the question is the group. See prop conventions for how a class name you pass resolves against the component's own.

Accessibility

• The set takes one tab stop and the arrow keys move within it (a roving tab index).
• The group's label becomes its accessible name.
• Each Radio is wired to its label, so clicking the text selects it.