Skip to Content
Documentation
Saas UI
Get Pro
Getting started
Components
Overview

Radio

Used to select one option from several options

SourceStorybookRecipeArk

Anatomy

import { Radio, RadioGroup } from '@saas-ui/react'
<RadioGroup>
  <Radio />
</RadioGroup>

Examples

Controlled

Use the value and onValueChange prop to control the selected radio button

Colors

Use the colorPalette prop to change the color scheme of the component.

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Sizes

Use the size prop to change the size of the radio component.

Variants

Use the variant prop to change the appearance of the radio component.

Disabled

Use the disabled prop to make the radio disabled.

Hook Form

Use the Controller component from react-hook-form to control the radio group withing a form

Select value

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'

The color palette of the component

variant 'solid'
'outline' | 'subtle' | 'solid'

The variant of the component

size 'md'
'xs' | 'sm' | 'md' | 'lg'

The size of the component

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
defaultValue
string

The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.

disabled
boolean

If `true`, the radio group will be disabled

form
string

The associate form of the underlying input.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>

The ids of the elements in the radio. Useful for composition.

name
string

The name of the input fields in the radio (Useful for form submission).

onValueChange
(details: ValueChangeDetails) => void

Function called once a radio is checked

orientation
'horizontal' | 'vertical'

Orientation of the radio group

readOnly
boolean

Whether the checkbox is read-only

value
string

The controlled value of the radio group

Previous

Radio Card

Next

Rating