'use client'
import { HStack } from '@chakra-ui/react'
import { Radio, RadioGroup } from '@saas-ui/react'
export const RadioBasic = () => {
return (
<RadioGroup.Root defaultValue="1">
<HStack gap="6">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
<Radio value="3">Option 3</Radio>
</HStack>
</RadioGroup.Root>
)
}
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
'use client'
import { useState } from 'react'
import { HStack } from '@chakra-ui/react'
import { Radio, RadioGroup } from '@saas-ui/react'
export const RadioControlled = () => {
const [value, setValue] = useState<string | null>('1')
return (
<RadioGroup.Root
value={value}
onValueChange={({ value }) => setValue(value)}
>
<HStack gap="6">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
<Radio value="3">Option 3</Radio>
</HStack>
</RadioGroup.Root>
)
}
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
'use client'
import { HStack, Stack, Text } from '@chakra-ui/react'
import { Radio, RadioGroup } from '@saas-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const RadioWithColors = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<RadioGroup.Root
colorPalette={colorPalette}
defaultValue="react"
spaceX="8"
>
<Radio value="react">React</Radio>
<Radio value="vue">Vue</Radio>
<Radio value="solid">Solid</Radio>
</RadioGroup.Root>
</HStack>
))}
</Stack>
)
}
Sizes
Use the size prop to change the size of the radio component.
'use client'
import { HStack } from '@chakra-ui/react'
import { Radio, RadioGroup } from '@saas-ui/react'
export const RadioWithSizes = () => {
return (
<HStack gap="4">
<RadioGroup.Root size="sm">
<Radio value="react">Radio (sm)</Radio>
</RadioGroup.Root>
<RadioGroup.Root size="md">
<Radio value="react">Radio (md)</Radio>
</RadioGroup.Root>
<RadioGroup.Root size="lg">
<Radio value="react">Radio (lg)</Radio>
</RadioGroup.Root>
</HStack>
)
}
Variants
Use the variant prop to change the appearance of the radio component.
'use client'
import { For, Stack } from '@chakra-ui/react'
import { Radio, RadioGroup } from '@saas-ui/react'
export const RadioWithVariants = () => {
return (
<Stack gap="4">
<For each={['solid', 'outline', 'subtle']}>
{(variant) => (
<RadioGroup.Root
key={variant}
variant={variant}
defaultValue="react"
spaceX="4"
colorPalette="teal"
>
<Radio value="react" minW="120px">
Radio ({variant})
</Radio>
<Radio value="vue">Vue ({variant})</Radio>
</RadioGroup.Root>
)}
</For>
</Stack>
)
}
Disabled
Use the disabled prop to make the radio disabled.
'use client'
import { HStack } from '@chakra-ui/react'
import { Radio, RadioGroup } from '@saas-ui/react'
export const RadioDisabled = () => {
return (
<RadioGroup.Root defaultValue="2">
<HStack gap="6">
<Radio value="1" disabled>
Option 1
</Radio>
<Radio value="2">Option 2</Radio>
<Radio value="3">Option 3</Radio>
</HStack>
</RadioGroup.Root>
)
}
Hook Form
Use the Controller component from react-hook-form to control the radio group
withing a form
'use client'
import { Button, Fieldset, HStack } from '@chakra-ui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { Radio, RadioGroup } from '@saas-ui/react'
import { Controller, useForm } from 'react-hook-form'
import { z } from 'zod'
const items = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
]
const formSchema = z.object({
value: z.string({ message: 'Value is required' }),
})
type FormValues = z.infer<typeof formSchema>
export const RadioWithHookForm = () => {
const {
control,
handleSubmit,
formState: { errors },
} = useForm<FormValues>({
resolver: zodResolver(formSchema),
})
const onSubmit = handleSubmit((data) => console.log(data))
return (
<form onSubmit={onSubmit}>
<Fieldset.Root invalid={!!errors.value}>
<Fieldset.Legend>Select value</Fieldset.Legend>
<Controller
name="value"
control={control}
render={({ field }) => (
<RadioGroup.Root
name={field.name}
value={field.value}
onValueChange={({ value }) => {
field.onChange(value)
}}
>
<HStack gap="6">
{items.map((item) => (
<Radio
key={item.value}
value={item.value}
inputProps={{ onBlur: field.onBlur }}
>
{item.label}
</Radio>
))}
</HStack>
</RadioGroup.Root>
)}
/>
{errors.value && (
<Fieldset.ErrorText>{errors.value?.message}</Fieldset.ErrorText>
)}
<Button size="sm" type="submit" alignSelf="flex-start">
Submit
</Button>
</Fieldset.Root>
</form>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
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 | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | stringThe initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group. | |
disabled | booleanIf `true`, the radio group will be disabled | |
form | stringThe associate form of the underlying input. | |
id | stringThe 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 | stringThe name of the input fields in the radio (Useful for form submission). | |
onValueChange | (details: ValueChangeDetails) => voidFunction called once a radio is checked | |
orientation | 'horizontal' | 'vertical'Orientation of the radio group | |
readOnly | booleanWhether the checkbox is read-only | |
value | stringThe controlled value of the radio group |