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>
  );
};

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

API Reference

RadioGroup

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

asChild

boolean

---

defaultValue

string

---

dir

"ltr" | "rtl"

---

disabled

boolean

---

label

string

Label shown above the radio options.

---

loop

boolean

---

name

string

---

onValueChange

(value: string) => void

---

orientation

"horizontal" | "vertical" = "vertical"

---

required

boolean

---

theme

"light" | "dark" = "light"

Visual theme for the group and items.

---

value

null | string

---

RadioGroupItem

value

Required

string

---

asChild

boolean

---

checked

boolean

---

children

ReactNode

Additional content below the label.

---

label

string

Label shown beside the radio circle.

---

required

boolean

---