RadioGroup

<RadioGroup>TailwindCSS Modules

A group of radio buttons allowing a user to select exactly one option from a list.

InstallationColoxo CLI
npx coloxo add radio --style coloxo-css
ES Module ImportPlayground / npm package
import { RadioGroup } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-border-primary: #E2E8F0--cx-radius-full: 9999pxsize: 16px

1. Variant Matrix

Radio buttons can be laid out vertically or horizontally, and individual items or the entire group can be disabled.

Default (Vertical)HorizontalDisabled Items
States
Employment type

40 hours

Status
Employment type

40 hours

2. Interactive Props Configurator

Orientation

Invalid / Error State

Disabled Group

Visual Render Canvas
Employment type

40 hours

tsx
<RadioGroup  label="Employment type"  defaultValue="ft"  options={[    { value: "ft", label: "Full time", description: "40 hours" },    { value: "pt", label: "Part time" },    { value: "ct", label: "Contractor" }  ]}/>

3. Dark theme

Radio buttons adapt their border, background, and indicator colors gracefully in dark mode.

Employment type

40 hours

4. Enterprise layout compositions

Radio groups are typically used in forms to present mutually exclusive options.

Contract Details

Payment Term
Currency

Accessibility

Radix UI Primitives

Built on Radix RadioGroup, providing native arrow-key navigation to move selection between items without tabbing.

Fieldset Semantics

The group is wrapped in a radiogroup `role`, and the overall `label` correctly titles the group for screen readers.

Props

NameTypeDefaultDescription
labelReactNode—Main group label.
optionsRadioOption[]—Array of { value, label, description, disabled }.
valuestring—Controlled selected value.
defaultValuestring—Uncontrolled default value.
onValueChange(value: string) => void—Selection change handler.
orientation"vertical" | "horizontal"verticalLayout.
errorReactNode—Validation message.
disabledboolean—Disables the entire group.