'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 | 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 |