dotUI

Radio Group

A radio group allows a user to select a single item from a list of mutually exclusive options.

Docs
Overview
Examples
Size
<RadioGroup defaultValue="sm">
  <Label>Size</Label>
  <FieldGroup>
    <Radio value="sm">
      <RadioIndicator />
      <Label>Small</Label>
    </Radio>
    <Radio value="md">
      <RadioIndicator />
      <Label>Medium</Label>
    </Radio>
    <Radio value="lg">
      <RadioIndicator />
      <Label>Large</Label>
    </Radio>
  </FieldGroup>
</RadioGroup>

Installation

npx shadcn@latest add @dotui/radio-group

Usage

Use radio group to allow users to select a single option from a short list of related options.

import { Radio, RadioGroup, RadioIndicator } from "@/components/ui/radio-group";
<RadioGroup defaultValue="sm">
  <Radio value="sm">
    <RadioIndicator />
    <Label>Small</Label>
  </Radio>
  <Radio value="md">
    <RadioIndicator />
    <Label>Medium</Label>
  </Radio>
</RadioGroup>

Playground

Use the controls below to experiment with different radio group props and see the live preview and code update.

Select size
orientation
<RadioGroup defaultValue="md">
  <Label>Select size</Label>
  <FieldGroup>
    <Radio value="sm">
      <RadioIndicator />
      <Label>Small</Label>
    </Radio>
    <Radio value="md">
      <RadioIndicator />
      <Label>Medium</Label>
    </Radio>
    <Radio value="lg">
      <RadioIndicator />
      <Label>Large</Label>
    </Radio>
  </FieldGroup>
</RadioGroup>

API Reference

RadioGroup

A radio group allows a user to select a single item from a list of mutually exclusive options.

PropType
boolean
boolean
Orientation
ReactNode | function
string | null
string | null
function

Radio

A radio represents an individual option within a radio group.

PropType
RefObject<HTMLInputElement | null>
boolean
ReactNode | function

On this page

Last updated on 1/13/2026

On this page

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.