Radio Group
Allows single selection from multiple options.
Anatomy
To set up the radio group correctly, you’ll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Design impact on the asChild property
The RadioGroup.Item element of the radio group is a label element. This is
because the radio group is a form control and should be associated with a label
to provide context and meaning to the user. Otherwise, the HTML and
accessibility structure will be invalid.
If you need to use the
asChildproperty, make sure that thelabelelement is the direct child of theRadioGroup.Itemcomponent.
Examples
Learn how to use the RadioGroup component in your project. Let’s take a look
at the most basic example:
import { RadioGroup } from '@ark-ui/react'
export const Basic = () => {
const frameworks = ['React', 'Solid', 'Vue']
return (
<RadioGroup.Root>
<RadioGroup.Label>Framework</RadioGroup.Label>
<RadioGroup.Indicator />
{frameworks.map((framework) => (
<RadioGroup.Item key={framework} value={framework}>
<RadioGroup.ItemText>{framework}</RadioGroup.ItemText>
<RadioGroup.ItemControl />
</RadioGroup.Item>
))}
</RadioGroup.Root>
)
}
import { Index } from 'solid-js'
import { RadioGroup } from '@ark-ui/solid'
export const Basic = () => {
const frameworks = ['React', 'Solid', 'Vue']
return (
<RadioGroup.Root>
<RadioGroup.Label>Framework</RadioGroup.Label>
<RadioGroup.Indicator />
<Index each={frameworks}>
{(framework) => (
<RadioGroup.Item value={framework()}>
<RadioGroup.ItemText>{framework()}</RadioGroup.ItemText>
<RadioGroup.ItemControl />
</RadioGroup.Item>
)}
</Index>
</RadioGroup.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from '@ark-ui/vue'
const frameworks = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<RadioGroup.Root>
<RadioGroup.Label>Framework</RadioGroup.Label>
<RadioGroup.Indicator />
<RadioGroup.Item v-for="framework in frameworks" :key="framework" :value="framework">
<RadioGroup.ItemText>{{ framework }}</RadioGroup.ItemText>
<RadioGroup.ItemControl />
</RadioGroup.Item>
</RadioGroup.Root>
</template>
Disabling the radio group
To make a radio group disabled, set the disabled prop to true.
import { RadioGroup } from '@ark-ui/react'
export const Disabled = () => {
const frameworks = ['React', 'Solid', 'Vue']
return (
<RadioGroup.Root disabled>
<RadioGroup.Label>Framework</RadioGroup.Label>
{frameworks.map((framework) => (
<RadioGroup.Item key={framework} value={framework}>
<RadioGroup.ItemText>{framework}</RadioGroup.ItemText>
<RadioGroup.ItemControl />
</RadioGroup.Item>
))}
</RadioGroup.Root>
)
}
import { Index } from 'solid-js'
import { RadioGroup } from '@ark-ui/solid'
export const Disabled = () => {
const frameworks = ['React', 'Solid', 'Vue']
return (
<RadioGroup.Root disabled>
<RadioGroup.Label>Framework</RadioGroup.Label>
<Index each={frameworks}>
{(framework) => (
<RadioGroup.Item value={framework()}>
<RadioGroup.ItemText>{framework()}</RadioGroup.ItemText>
<RadioGroup.ItemControl />
</RadioGroup.Item>
)}
</Index>
</RadioGroup.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from '@ark-ui/vue'
const frameworks = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<RadioGroup.Root disabled>
<RadioGroup.Label>Framework</RadioGroup.Label>
<RadioGroup.Indicator />
<RadioGroup.Item v-for="framework in frameworks" :key="framework" :value="framework">
<RadioGroup.ItemText>{{ framework }}</RadioGroup.ItemText>
<RadioGroup.ItemControl />
</RadioGroup.Item>
</RadioGroup.Root>
</template>
Setting the initial value
To set the radio group’s initial value, set the defaultValue prop to the value
of the radio item to be selected by default.
Story not foundStory not foundStory not foundListening for changes
When the radio group value changes, the onValueChange callback is invoked.
Story not foundStory not foundStory not foundAPI Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
defaultValueThe initial value of the radio group when it is first rendered.
Use when you do not need to control the state of the radio group. | string | |
disabledIf `true`, the radio group will be disabled | boolean | |
formThe associate form of the underlying input. | string | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the radio. Useful for composition. | Partial<{
root: string
label: string
indicator: string
item(value: string): string
itemLabel(value: string): string
itemControl(value: string): string
itemHiddenInput(value: string): string
}> | |
nameThe name of the input fields in the radio
(Useful for form submission). | string | |
onValueChangeFunction called once a radio is checked | (details: ValueChangeDetails) => void | |
orientationOrientation of the radio group | 'horizontal' | 'vertical' | |
readOnlyWhether the checkbox is read-only | boolean | |
valueThe value of the checked radio | string |
Indicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemControl
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Item
| Prop | Type | Default |
|---|---|---|
value | string | |
asChildRender as a different element type. | boolean | |
disabled | boolean | |
invalid | boolean |
ItemText
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Previous
Progress - LinearNext
Rating Group