edbnedbn/ui
Get Started
WelcomeWhy We're DifferentChoosing a VariantChangelogLicense
Components
OverviewAlert DialogCheckboxCollapsibleDialogFieldInputMenuNumber FieldPopoverProgressRadio
Scroll AreaSelectSeparatorSliderSwitchTabsToggleTooltip
Shared Components
InputTextareaCardAvatarTableAlertBreadcrumbPagination
0installs
Components
Maps
GitHub stars
HomeDocsComponentsStaticRadio

On this page

Radio

A set of checkable buttons where only one can be checked at a time. Built on Base UI Radio primitives.

Usage

import {
  RadioGroupRoot,
  RadioItem,
} from "@/components/ui/static/radio"
<RadioGroupRoot
  value={value}
  onValueChange={(value) => setValue(value as string)}
>
  <RadioItem value="default" label="Default" />
  <RadioItem value="comfortable" label="Comfortable" />
  <RadioItem value="compact" label="Compact" />
</RadioGroupRoot>

Installation

Install dependencies

TypeScript
npm install @base-ui/react

Examples

Plan Selection

Select a plan

Free

Basic features, limited usage

$0/mo

Pro

All features, unlimited usage

$29/mo

Enterprise

Custom solutions, dedicated support

Contact us

API Reference

valuestring

The controlled value of the selected item.

defaultValuestring

The default value when uncontrolled.

onValueChange(value: string) => void

Callback when the selected value changes.

disabledboolean
=false

Whether the radio group is disabled.

requiredboolean
=false

Whether a selection is required.