RadioGroup

Mark one option as selected.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
Language
RadioGroup example
import { Radio, RadioGroup } from "@/shim-ui/radio-group";

export default () => (
  <RadioGroup defaultValue={"ts"} label="Language">
    <Radio value="js">JavaScript</Radio>
    <Radio value="ts">TypeScript</Radio>
    <Radio value="py">Python</Radio>
  </RadioGroup>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add radio-group

Label position

Use the labelPosition prop to choose where the label appears.

Library
Label position example
import { Radio, RadioGroup } from "@/shim-ui/radio-group";

export default () => (
  <RadioGroup defaultValue={"ts-pattern"} label="Library" labelPosition="side">
    <Radio value="lodash">Lodash</Radio>
    <Radio value="ts-pattern">TS-Pattern</Radio>
    <Radio value="ramda">Ramda</Radio>
    <Radio value="fp-ts">fp-ts</Radio>
  </RadioGroup>
);

Size

Adjust the size prop to match the radio button scale with nearby controls.

Framework
Framework
Framework
Framework
Size example
"use client";
import { Radio, RadioGroup } from "@/shim-ui/radio-group";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <RadioGroup defaultValue={"react"} key={size} label="Framework" size={size}>
      <Radio value="react">React</Radio>
      <Radio value="svelte">Svelte</Radio>
    </RadioGroup>
  ));

Variant

Use the variant prop to align radio buttons with the surrounding surface style.

Classic
Soft
Outline
Variant example
import { Radio, RadioGroup } from "@/shim-ui/radio-group";

export default () => (
  <>
    <RadioGroup defaultValue={"react"} label="Classic" variant="classic">
      <Radio value="react">React</Radio>
      <Radio value="svelte">Svelte</Radio>
      <Radio isDisabled value="vue">
        Vue
      </Radio>
    </RadioGroup>
    <RadioGroup defaultValue={"react"} label="Soft" variant="soft">
      <Radio value="react">React</Radio>
      <Radio value="svelte">Svelte</Radio>
      <Radio isDisabled value="vue">
        Vue
      </Radio>
    </RadioGroup>
    <RadioGroup defaultValue={"react"} label="Outline" variant="outline">
      <Radio value="react">React</Radio>
      <Radio value="svelte">Svelte</Radio>
      <Radio isDisabled value="vue">
        Vue
      </Radio>
    </RadioGroup>
  </>
);

Orientation

Switch between horizontal and vertical layouts with the orientationprop.

Framework
Orientation example
import { Radio, RadioGroup } from "@/shim-ui/radio-group";

export default () => (
  <RadioGroup label="Framework" orientation="horizontal">
    <Radio value="react">React</Radio>
    <Radio value="vue">Svelte</Radio>
  </RadioGroup>
);

Radio descriptions

Add descriptive helper text with the description prop.

Library
Radio descriptions example
import { Radio, RadioGroup } from "@/shim-ui/radio-group";

export default () => (
  <RadioGroup defaultValue={"ts-pattern"} label="Library">
    <Radio
      description="Type-safe pattern matching library for TypeScript."
      value="ts-pattern"
    >
      TS-Pattern
    </Radio>
    <Radio
      description="A modern JavaScript utility library delivering modularity, performance & extras."
      value="lodash"
    >
      Lodash
    </Radio>
    <Radio
      description="A practical functional library for JavaScript programmers."
      value="ramda"
    >
      Ramda
    </Radio>
  </RadioGroup>
);