Radio Group | Ark UI

ReactSolidSvelteVue

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-part attribute to help identify them in the DOM.

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'

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 { RadioGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'

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'

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 { RadioGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'

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.

import { RadioGroup } from '@ark-ui/react'

const InitialValue = () => {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <RadioGroup.Root defaultValue="Solid">
      <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 { RadioGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'

const InitialValue = () => {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <RadioGroup.Root value="Solid">
      <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 model-value="Solid">
    <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>

Listening for changes

When the radio group value changes, the onValueChange callback is invoked.

import { RadioGroup } from '@ark-ui/react'

const OnEvent = () => {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <RadioGroup.Root onValueChange={(details) => console.log(details.value)}>
      <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 { RadioGroup } from '@ark-ui/solid'
import { Index } from 'solid-js'

const OnEvent = () => {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <RadioGroup.Root onValueChange={(details) => console.log(details.value)}>
      <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 @value-change="(details) => console.log(details.value)">
    <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>

API Reference

Item

Prop	Type	Default
`value`	`string`
`asChild`	`boolean`
`disabled`	`boolean`
`invalid`	`boolean`

Root

Prop	Type	Default
`asChild`	`boolean`
`defaultValue`	`string`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`disabled`	`boolean`
`form`	`string`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`ids`	`Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>`
`name`	`string`
`onValueChange`	`(details: ValueChangeDetails) => void`
`orientation`	`'horizontal' \| 'vertical'`
`value`	`string`

Label

Prop	Type	Default
`asChild`	`boolean`

ItemText

Prop	Type	Default
`asChild`	`boolean`

Indicator

Prop	Type	Default
`asChild`	`boolean`

ItemControl

Prop	Type	Default
`asChild`	`boolean`