Radio Group

Usage

To display a radio group, list two or more RadioGroupItems within RadioGroup.

DefaultComfortableCompact

import { RadioGroup, RadioGroupItem } from "stylus-ui/RadioGroup";

export default () => (
  <RadioGroup defaultValue="default">
    <RadioGroupItem value="default" label="Default" />
    <RadioGroupItem value="comfortable" label="Comfortable" />
    <RadioGroupItem value="compact" label="Compact" />
  </RadioGroup>
);

Orientation

Display radio buttons horizontally by passing orientation="horizontal".

Accessibility

Horizontally-aligned radio groups should usually be avoided. Horizontal lists are more difficult to read and scan. A horizontal layout can make it difficult to tell which label belongs to which radio button.

DefaultComfortableCompact

import { RadioGroup, RadioGroupItem } from "stylus-ui/RadioGroup";

export default () => (
  <RadioGroup defaultValue="default" orientation="horizontal">
    <RadioGroupItem value="default" label="Default" />
    <RadioGroupItem value="comfortable" label="Comfortable" />
    <RadioGroupItem value="compact" label="Compact" />
  </RadioGroup>
);

Disabled

The entire group can be disabled by using the disabled prop.

DefaultComfortableCompact

import { RadioGroup, RadioGroupItem } from "stylus-ui/RadioGroup";

export default () => (
  <RadioGroup defaultValue="default" disabled>
    <RadioGroupItem value="default" label="Default" />
    <RadioGroupItem value="comfortable" label="Comfortable" />
    <RadioGroupItem value="compact" label="Compact" />
  </RadioGroup>
);

The disabled prop can also be used to disable a specific RadioGroupItem.

DefaultComfortableCompact

import { RadioGroup, RadioGroupItem } from "stylus-ui/RadioGroup";

export default () => (
  <RadioGroup defaultValue="default">
    <RadioGroupItem value="default" label="Default" />
    <RadioGroupItem value="comfortable" label="Comfortable" />
    <RadioGroupItem value="compact" label="Compact" disabled />
  </RadioGroup>
);

Controlled state

By default, RadioGroup is uncontrolled, meaning it manages its own state locally. To make it controlled, set value and onValueChange.

Caution

Do not set defaultValue when using a component in its controlled state.

DefaultComfortableCompact

import { RadioGroup, RadioGroupItem } from "stylus-ui/RadioGroup";
import { useState } from "react";

export default () => {
  const [radioValue, setRadioValue] = useState("default");

  return (
    <RadioGroup
      value={radioValue}
      onValueChange={(value) => setRadioValue(value)}
    >
      <RadioGroupItem value="default" label="Default" />
      <RadioGroupItem value="comfortable" label="Comfortable" />
      <RadioGroupItem value="compact" label="Compact" />
    </RadioGroup>
  );
};

API Reference

RadioGroup

Contains all the parts of a radio group.

Inherits properties from HTMLElement.

Prop	Type	Default
asChild	boolean	false
children	ReactNode
defaultValue	string
disabled	boolean
label	string
loop	boolean	true
onValueChange	(value: string) => void
orientation	"horizontal""vertical"	"vertical"
required	boolean
theme	"light""dark"	"light"
value	string

RadioGroupItem

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
asChild	boolean	false
children	ReactNode
defaultValue	string
disabled	boolean
label	string
loop	boolean	true
orientation	"horizontal""vertical"	"vertical"
required	boolean
theme	"light""dark"	"light"
value	string

Keyboard Controls

Key	Description
Tab	Move focus into and out of the radio group
↑ ↓	Move selection between options (vertical layout)
← →	Move selection between options (horizontal layout)
Space	Select the focused option
Home	Jump to first option
End	Jump to last option