Pure UI
DocsComponentsBlocksNEW
141

Docs

IntroductionGet Started
Installation
Theming

Components

AccordionAvatarBadgeButtonButton GroupCalendarCardCheckboxCollapsibleCombobox
Detached Triggers
DialogInputInput GroupInput OTPKbdLabelMenuNumber FieldPopoverRadio GroupNEWScroll AreaSelectSeparatorSheetSpinnerSwitchTabsNEWTextareaToastTooltip

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.

Choose your favorite cricket player

Installation

Loading content...

Usage

import { RadioGroup, Radio } from "@/components/ui/radio-group";
<RadioGroup defaultValue="react-query">
  <div className="text-sm font-medium">
    Choose your favorite Tanstack library
  </div>
  <Label>
    <Radio value="react-query" /> React Query
  </Label>
  <Label>
    <Radio value="tanstack-router" /> Tanstack Router
  </Label>
  <Label>
    <Radio value="tanstack-table" /> Tanstack Table
  </Label>
</RadioGroup>

Examples

Basic

With Description

Orientation

You can change the orientation of the radio group to horizontal or vertical by passing the orientation prop to the RadioGroup component.

How would you rate your experience?

Controlled

You can control the value of the radio group by passing the value prop to the RadioGroup component and using the onValueChange callback to update the value.

Choose your favorite cricket player
Selected Value: virat

Custom Layout

AI Model Selection

Choose your preferred AI model

Disabled

Choose your favorite cricket player