Skip to content
Stylus UI

Radio Group

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

Usage

Section titled “Usage”

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

 
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

Section titled “Orientation”

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

 
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

Section titled “Disabled”

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

 
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.

 
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

Section titled “Controlled state”

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

 
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

Section titled “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

Section titled “API Reference”

RadioGroup

Section titled “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

Section titled “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