Radio Group

A set of radio inputs built on Radix primitives. Only one option can be selected at a time.

Installation


pnpm dlx shadcn@latest add @basic-ui/radio-group

Usage

import {
  RadioGroup,
  RadioGroupItem,

Badge

Checkbox

On This Page

Installation Usage Examples Sizes Design System Size Props RadioGroup RadioGroupItemWrapper RadioGroupItem

Size	Height	Width	Radius
`s`	`--checkbox-radio-height-s`	`--checkbox-radio-width-s`	`--checkbox-radio-radius-s`
`r`	`--checkbox-radio-height-r`	`--checkbox-radio-width-r`	`--checkbox-radio-radius-r`
`m`	`--checkbox-radio-height-m`	`--checkbox-radio-width-m`	`--checkbox-radio-radius-m`

Prop	Type	Default	Required	Description
`size`	`s` / `r` / `m`	`r`	No	The size of the radio group
`defaultValue`	`string`	`undefined`	No	The default value of the radio group
`onValueChange`	`(value: string) => void`	`undefined`	No	The function to call when the value changes
`disabled`	`boolean`	`false`	No	Whether the radio group is disabled
`className`	`string`	`undefined`	No	The class name of the radio group

Prop	Type	Default	Required	Description
`htmlFor`	`string`	`undefined`	Yes	The HTML for attribute of the radio group item wrapper
`children`	`ReactNode`	`undefined`	Yes	The children of the radio group item wrapper
`className`	`string`	`undefined`	No	The class name of the radio group item wrapper

Prop	Type	Default	Required	Description
`value`	`string`	`undefined`	Yes	The value of the radio group item
`id`	`string`	`undefined`	Yes	The id of the radio group item
`className`	`string`	`undefined`	No	The class name of the radio group item

import {
  RadioGroup,
  RadioGroupItem,
  RadioGroupItemWrapper,
} from '@/registry/basic-ui/radio-group';

export function RadioGroupDefault() {
  return (
    <RadioGroup defaultValue="comfortable">
      <RadioGroupItemWrapper htmlFor="r1">
        <RadioGroupItem value="default" id="r1" />
        <span>Default</span>
      </RadioGroupItemWrapper>
      <RadioGroupItemWrapper htmlFor="r2">
        <RadioGroupItem value="comfortable" id="r2" />
        <span>Comfortable</span>
      </RadioGroupItemWrapper>
      <RadioGroupItemWrapper htmlFor="r3">
        <RadioGroupItem value="checked" id="r3" checked disabled />
        <span>Checked and Disabled</span>
      </RadioGroupItemWrapper>
      <RadioGroupItemWrapper htmlFor="r4">
        <RadioGroupItem value="disabled" id="r4" disabled />
        <span>Disabled and Not Checked</span>
      </RadioGroupItemWrapper>
    </RadioGroup>
  );
}

'use client';

import {
  RadioGroup,
  RadioGroupItem,
  RadioGroupItemWrapper,
} from '@/registry/basic-ui/radio-group';

const sizeConfigs: Array<{
  id: string;
  label: string;
  size: 's' | 'r' | 'm';
}> = [
  { id: 'radio-size-s', label: 'Compact (s)', size: 's' },
  { id: 'radio-size-r', label: 'Regular (r)', size: 'r' },
  { id: 'radio-size-m', label: 'Comfortable (m)', size: 'm' },
];

export function RadioGroupSize() {
  return (
    <div className="flex flex-col gap-(--gap-6)">
      {sizeConfigs.map(({ id, label, size }) => (
        <fieldset key={id} className="space-y-3">
          <legend className="text-sm font-semibold text-(--grey-text-alpha-1-default)">
            {label}
          </legend>
          <RadioGroup
            size={size}
            defaultValue={`${id}-email`}
            className="gap-(--gap-2)"
          >
            <RadioGroupItemWrapper htmlFor={`${id}-email`}>
              <RadioGroupItem id={`${id}-email`} value={`${id}-email`} />
              <span>Email alerts</span>
            </RadioGroupItemWrapper>
            <RadioGroupItemWrapper htmlFor={`${id}-sms`}>
              <RadioGroupItem id={`${id}-sms`} value={`${id}-sms`} />
              <span>SMS alerts</span>
            </RadioGroupItemWrapper>
          </RadioGroup>
        </fieldset>
      ))}
    </div>
  );
}