# Radio Group

URL: https://ark-ui.com/docs/components/radio-group
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/radio-group.mdx

Allows single selection from multiple options.

---

<ComponentPreview id="RadioGroup" />

## Anatomy

<Anatomy id="radio-group" />

```tsx
<RadioGroup.Root>
  <RadioGroup.Label />
  <RadioGroup.Indicator />
  <RadioGroup.Item>
    <RadioGroup.ItemControl />
    <RadioGroup.ItemText />
    <RadioGroup.ItemHiddenInput />
  </RadioGroup.Item>
</RadioGroup.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { RadioGroup } from '@ark-ui/react/radio-group'
import styles from 'styles/radio-group.module.css'

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

  return (
    <RadioGroup.Root className={styles.Root} defaultValue="React">
      <RadioGroup.Label className={styles.Label}>Framework</RadioGroup.Label>
      {frameworks.map((framework) => (
        <RadioGroup.Item className={styles.Item} key={framework} value={framework}>
          <RadioGroup.ItemControl className={styles.ItemControl} />
          <RadioGroup.ItemText className={styles.ItemText}>{framework}</RadioGroup.ItemText>
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { For } from 'solid-js'
import styles from 'styles/radio-group.module.css'

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

  return (
    <RadioGroup.Root class={styles.Root} defaultValue="React">
      <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
      <For each={frameworks}>
        {(framework) => (
          <RadioGroup.Item class={styles.Item} value={framework}>
            <RadioGroup.ItemControl class={styles.ItemControl} />
            <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
            <RadioGroup.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </For>
    </RadioGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { RadioGroup } from '@ark-ui/vue/radio-group'
import styles from 'styles/radio-group.module.css'

const frameworks = ['React', 'Solid', 'Vue']
</script>

<template>
  <RadioGroup.Root :class="styles.Root" default-value="React">
    <RadioGroup.Label :class="styles.Label">Framework</RadioGroup.Label>
    <RadioGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
      <RadioGroup.ItemControl :class="styles.ItemControl" />
      <RadioGroup.ItemText :class="styles.ItemText">{{ framework }}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { RadioGroup } from '@ark-ui/svelte/radio-group'
  import styles from 'styles/radio-group.module.css'

  const frameworks = ['React', 'Solid', 'Vue']
</script>

<RadioGroup.Root class={styles.Root} defaultValue="React">
  <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
  {#each frameworks as framework}
    <RadioGroup.Item class={styles.Item} value={framework}>
      <RadioGroup.ItemControl class={styles.ItemControl} />
      <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.Root>

```

### 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.

**Example: initial-value**

#### React

```tsx
import { RadioGroup } from '@ark-ui/react/radio-group'
import styles from 'styles/radio-group.module.css'

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

  return (
    <RadioGroup.Root className={styles.Root} defaultValue="Solid">
      <RadioGroup.Label className={styles.Label}>Framework</RadioGroup.Label>
      {frameworks.map((framework) => (
        <RadioGroup.Item className={styles.Item} key={framework} value={framework}>
          <RadioGroup.ItemControl className={styles.ItemControl} />
          <RadioGroup.ItemText className={styles.ItemText}>{framework}</RadioGroup.ItemText>
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { For } from 'solid-js'
import styles from 'styles/radio-group.module.css'

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

  return (
    <RadioGroup.Root class={styles.Root} defaultValue="Solid">
      <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
      <For each={frameworks}>
        {(framework) => (
          <RadioGroup.Item class={styles.Item} value={framework}>
            <RadioGroup.ItemControl class={styles.ItemControl} />
            <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
            <RadioGroup.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </For>
    </RadioGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { RadioGroup } from '@ark-ui/vue/radio-group'
import styles from 'styles/radio-group.module.css'

const frameworks = ['React', 'Solid', 'Vue']
</script>

<template>
  <RadioGroup.Root :class="styles.Root" defaultValue="Solid">
    <RadioGroup.Label :class="styles.Label">Framework</RadioGroup.Label>
    <RadioGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
      <RadioGroup.ItemControl :class="styles.ItemControl" />
      <RadioGroup.ItemText :class="styles.ItemText">{{ framework }}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { RadioGroup } from '@ark-ui/svelte/radio-group'
  import styles from 'styles/radio-group.module.css'

  const frameworks = ['React', 'Solid', 'Vue']
</script>

<RadioGroup.Root class={styles.Root} defaultValue="Solid">
  <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
  {#each frameworks as framework}
    <RadioGroup.Item class={styles.Item} value={framework}>
      <RadioGroup.ItemControl class={styles.ItemControl} />
      <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.Root>

```

### Controlled

For a controlled Radio Group, the state is managed using the `value` prop, and updates when the `onValueChange` event
handler is called:

**Example: controlled**

#### React

```tsx
import { RadioGroup } from '@ark-ui/react/radio-group'
import { useState } from 'react'
import styles from 'styles/radio-group.module.css'

export const Controlled = () => {
  const frameworks = ['React', 'Solid', 'Vue']
  const [value, setValue] = useState<string | null>(null)

  return (
    <RadioGroup.Root className={styles.Root} value={value} onValueChange={(e) => setValue(e.value)}>
      <RadioGroup.Label className={styles.Label}>Framework</RadioGroup.Label>
      {frameworks.map((framework) => (
        <RadioGroup.Item className={styles.Item} key={framework} value={framework}>
          <RadioGroup.ItemControl className={styles.ItemControl} />
          <RadioGroup.ItemText className={styles.ItemText}>{framework}</RadioGroup.ItemText>
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { For, createSignal } from 'solid-js'
import styles from 'styles/radio-group.module.css'

export const Controlled = () => {
  const frameworks = ['React', 'Solid', 'Vue']
  const [value, setValue] = createSignal<string | null>(null)

  return (
    <RadioGroup.Root class={styles.Root} value={value()} onValueChange={(e) => setValue(e.value)}>
      <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
      <For each={frameworks}>
        {(framework) => (
          <RadioGroup.Item class={styles.Item} value={framework}>
            <RadioGroup.ItemControl class={styles.ItemControl} />
            <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
            <RadioGroup.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </For>
    </RadioGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { RadioGroup } from '@ark-ui/vue/radio-group'
import { ref } from 'vue'
import styles from 'styles/radio-group.module.css'

const frameworks = ['React', 'Solid', 'Vue']
const value = ref<string | null>(null)
</script>

<template>
  <RadioGroup.Root :class="styles.Root" v-model="value">
    <RadioGroup.Label :class="styles.Label">Framework</RadioGroup.Label>
    <RadioGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
      <RadioGroup.ItemControl :class="styles.ItemControl" />
      <RadioGroup.ItemText :class="styles.ItemText">{{ framework }}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { RadioGroup } from '@ark-ui/svelte/radio-group'
  import styles from 'styles/radio-group.module.css'

  const frameworks = ['React', 'Solid', 'Vue']
  let value = $state<string | null>(null)
</script>

<RadioGroup.Root class={styles.Root} bind:value>
  <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
  {#each frameworks as framework}
    <RadioGroup.Item class={styles.Item} value={framework}>
      <RadioGroup.ItemControl class={styles.ItemControl} />
      <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.Root>

```

### Root Provider

An alternative way to control the radio group is to use the `RootProvider` component and the `useRadioGroup` hook. This
way you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { RadioGroup, useRadioGroup } from '@ark-ui/react/radio-group'
import button from 'styles/button.module.css'
import styles from 'styles/radio-group.module.css'

export const RootProvider = () => {
  const frameworks = ['React', 'Solid', 'Vue']
  const radioGroup = useRadioGroup({ defaultValue: 'React' })

  return (
    <div className="stack">
      <RadioGroup.RootProvider className={styles.Root} value={radioGroup}>
        <RadioGroup.Label className={styles.Label}>Framework</RadioGroup.Label>
        {frameworks.map((framework) => (
          <RadioGroup.Item className={styles.Item} key={framework} value={framework}>
            <RadioGroup.ItemControl className={styles.ItemControl} />
            <RadioGroup.ItemText className={styles.ItemText}>{framework}</RadioGroup.ItemText>
            <RadioGroup.ItemHiddenInput />
          </RadioGroup.Item>
        ))}
      </RadioGroup.RootProvider>

      <button className={button.Root} onClick={() => radioGroup.setValue('Solid')}>
        Set to Solid
      </button>
    </div>
  )
}

```

#### Solid

```tsx
import { RadioGroup, useRadioGroup } from '@ark-ui/solid/radio-group'
import { For } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/radio-group.module.css'

export const RootProvider = () => {
  const frameworks = ['React', 'Solid', 'Vue']
  const radioGroup = useRadioGroup({ defaultValue: 'React' })

  return (
    <div class="stack">
      <RadioGroup.RootProvider class={styles.Root} value={radioGroup}>
        <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
        <For each={frameworks}>
          {(framework) => (
            <RadioGroup.Item class={styles.Item} value={framework}>
              <RadioGroup.ItemControl class={styles.ItemControl} />
              <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
              <RadioGroup.ItemHiddenInput />
            </RadioGroup.Item>
          )}
        </For>
      </RadioGroup.RootProvider>

      <button class={button.Root} onClick={() => radioGroup().setValue('Solid')}>
        Set to Solid
      </button>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { RadioGroup, useRadioGroup } from '@ark-ui/vue/radio-group'
import button from 'styles/button.module.css'
import styles from 'styles/radio-group.module.css'

const frameworks = ['React', 'Solid', 'Vue']
const radioGroup = useRadioGroup({ defaultValue: 'React' })
</script>

<template>
  <div class="stack">
    <RadioGroup.RootProvider :class="styles.Root" :value="radioGroup">
      <RadioGroup.Label :class="styles.Label">Framework</RadioGroup.Label>
      <RadioGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
        <RadioGroup.ItemControl :class="styles.ItemControl" />
        <RadioGroup.ItemText :class="styles.ItemText">{{ framework }}</RadioGroup.ItemText>
        <RadioGroup.ItemHiddenInput />
      </RadioGroup.Item>
    </RadioGroup.RootProvider>

    <button :class="button.Root" @click="radioGroup.setValue('Solid')">Set to Solid</button>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { RadioGroup, useRadioGroup } from '@ark-ui/svelte/radio-group'
  import button from 'styles/button.module.css'
  import styles from 'styles/radio-group.module.css'

  const frameworks = ['React', 'Solid', 'Vue']

  const id = $props.id()
  const radioGroup = useRadioGroup({ id, defaultValue: 'React' })
</script>

<div class="stack">
  <RadioGroup.RootProvider class={styles.Root} value={radioGroup}>
    <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
    {#each frameworks as framework}
      <RadioGroup.Item class={styles.Item} value={framework}>
        <RadioGroup.ItemControl class={styles.ItemControl} />
        <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
        <RadioGroup.ItemHiddenInput />
      </RadioGroup.Item>
    {/each}
  </RadioGroup.RootProvider>

  <button class={button.Root} onclick={() => radioGroup().setValue('Solid')}>Set to Solid</button>
</div>

```

### Disabled

To make a radio group disabled, set the `disabled` prop to `true`.

**Example: disabled**

#### React

```tsx
import { RadioGroup } from '@ark-ui/react/radio-group'
import styles from 'styles/radio-group.module.css'

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

  return (
    <RadioGroup.Root className={styles.Root} defaultValue="React" disabled>
      <RadioGroup.Label className={styles.Label}>Framework</RadioGroup.Label>
      {frameworks.map((framework) => (
        <RadioGroup.Item className={styles.Item} key={framework} value={framework}>
          <RadioGroup.ItemControl className={styles.ItemControl} />
          <RadioGroup.ItemText className={styles.ItemText}>{framework}</RadioGroup.ItemText>
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { For } from 'solid-js'
import styles from 'styles/radio-group.module.css'

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

  return (
    <RadioGroup.Root class={styles.Root} defaultValue="React" disabled>
      <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
      <For each={frameworks}>
        {(framework) => (
          <RadioGroup.Item class={styles.Item} value={framework}>
            <RadioGroup.ItemControl class={styles.ItemControl} />
            <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
            <RadioGroup.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </For>
    </RadioGroup.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { RadioGroup } from '@ark-ui/vue/radio-group'
import styles from 'styles/radio-group.module.css'

const frameworks = ['React', 'Solid', 'Vue']
</script>

<template>
  <RadioGroup.Root :class="styles.Root" default-value="React" disabled>
    <RadioGroup.Label :class="styles.Label">Framework</RadioGroup.Label>
    <RadioGroup.Item v-for="framework in frameworks" :key="framework" :class="styles.Item" :value="framework">
      <RadioGroup.ItemControl :class="styles.ItemControl" />
      <RadioGroup.ItemText :class="styles.ItemText">{{ framework }}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { RadioGroup } from '@ark-ui/svelte/radio-group'
  import styles from 'styles/radio-group.module.css'

  const frameworks = ['React', 'Solid', 'Vue']
</script>

<RadioGroup.Root class={styles.Root} defaultValue="React" disabled>
  <RadioGroup.Label class={styles.Label}>Framework</RadioGroup.Label>
  {#each frameworks as framework}
    <RadioGroup.Item class={styles.Item} value={framework}>
      <RadioGroup.ItemControl class={styles.ItemControl} />
      <RadioGroup.ItemText class={styles.ItemText}>{framework}</RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.Root>

```

## Guides

### asChild

The `RadioGroup.Item` component renders as a `label` element by default. This ensures proper form semantics and
accessibility, as radio groups are form controls that require labels to provide meaningful context for users.

When using the `asChild` prop, you must **render a `label` element** as the direct child of `RadioGroup.Item` to
maintain valid HTML structure and accessibility compliance.

```tsx
// INCORRECT usage ❌
<RadioGroup.Item asChild>
  <div>
    <RadioGroup.ItemHiddenInput />
    <RadioGroup.ItemText>
      <RadioGroup.ItemControl />
    </RadioGroup.ItemText>
  </div>
</RadioGroup.Item>

// CORRECT usage ✅
<RadioGroup.Item asChild>
  <label>
    <RadioGroup.ItemHiddenInput />
    <RadioGroup.ItemText>
      <RadioGroup.ItemControl />
    </RadioGroup.ItemText>
  </label>
</RadioGroup.Item>
```

### Hidden Input

The `RadioGroup.ItemHiddenInput` component renders a hidden HTML input element that enables proper form submission and
integration with native form behaviors. This component is essential for the radio group to function correctly as it:

- Provides the underlying input element that browsers use for form submission
- Enables integration with form libraries and validation systems
- Ensures the radio group works with native form reset functionality

```tsx
// INCORRECT usage ❌
<RadioGroup.Item>
  <RadioGroup.ItemText>
    <RadioGroup.ItemControl />
  </RadioGroup.ItemText>
</RadioGroup.Item>

// CORRECT usage ✅
<RadioGroup.Item>
  <RadioGroup.ItemHiddenInput />
  <RadioGroup.ItemText>
    <RadioGroup.ItemControl />
  </RadioGroup.ItemText>
</RadioGroup.Item>
```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | 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` | No | If `true`, the radio group will be disabled |
| `form` | `string` | No | The associate form of the underlying input. |
| `id` | `string` | No | 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
}>` | No | The ids of the elements in the radio. Useful for composition. |
| `name` | `string` | No | The name of the input fields in the radio
(Useful for form submission). |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called once a radio is checked |
| `orientation` | `'horizontal' | 'vertical'` | No | Orientation of the radio group |
| `readOnly` | `boolean` | No | Whether the checkbox is read-only |
| `value` | `string` | No | The controlled value of the radio group |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the radio-group |
| `[data-disabled]` | Present when disabled |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the indicator |


**Indicator CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--transition-property` | The transition property value for the Indicator |
| `--left` | The left position value |
| `--top` | The top position value |
| `--width` | The width of the element |
| `--height` | The height of the element |


**ItemControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | item-control |
| `[data-active]` | Present when active or pressed |


**ItemHiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |
| `invalid` | `boolean` | No |  |


**ItemText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseRadioGroupReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | 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` | No | If `true`, the radio group will be disabled |
| `form` | `string` | No | The associate form of the underlying input. |
| `ids` | `Partial<{
  root: string
  label: string
  indicator: string
  item: (value: string) => string
  itemLabel: (value: string) => string
  itemControl: (value: string) => string
  itemHiddenInput: (value: string) => string
}>` | No | The ids of the elements in the radio. Useful for composition. |
| `name` | `string` | No | The name of the input fields in the radio
(Useful for form submission). |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called once a radio is checked |
| `orientation` | `'horizontal' | 'vertical'` | No | Orientation of the radio group |
| `readOnly` | `boolean` | No | Whether the checkbox is read-only |
| `value` | `string` | No | The controlled value of the radio group |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the radio-group |
| `[data-disabled]` | Present when disabled |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the indicator |


**Indicator CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--transition-property` | The transition property value for the Indicator |
| `--left` | The left position value |
| `--top` | The top position value |
| `--width` | The width of the element |
| `--height` | The height of the element |


**ItemControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | item-control |
| `[data-active]` | Present when active or pressed |


**ItemHiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |
| `invalid` | `boolean` | No |  |


**ItemText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseRadioGroupReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | 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` | No | If `true`, the radio group will be disabled |
| `form` | `string` | No | The associate form of the underlying input. |
| `id` | `string` | No | 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
}>` | No | The ids of the elements in the radio. Useful for composition. |
| `modelValue` | `string` | No | The v-model value of the radio group |
| `name` | `string` | No | The name of the input fields in the radio
(Useful for form submission). |
| `orientation` | `'horizontal' | 'vertical'` | No | Orientation of the radio group |
| `readOnly` | `boolean` | No | Whether the checkbox is read-only |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the radio-group |
| `[data-disabled]` | Present when disabled |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the indicator |


**Indicator CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--transition-property` | The transition property value for the Indicator |
| `--left` | The left position value |
| `--top` | The top position value |
| `--width` | The width of the element |
| `--height` | The height of the element |


**ItemControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | item-control |
| `[data-active]` | Present when active or pressed |


**ItemHiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |
| `invalid` | `boolean` | No |  |


**ItemText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `RadioGroupApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | 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` | No | If `true`, the radio group will be disabled |
| `form` | `string` | No | The associate form of the underlying input. |
| `id` | `string` | No | 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
}>` | No | The ids of the elements in the radio. Useful for composition. |
| `name` | `string` | No | The name of the input fields in the radio
(Useful for form submission). |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called once a radio is checked |
| `orientation` | `'horizontal' | 'vertical'` | No | Orientation of the radio group |
| `readOnly` | `boolean` | No | Whether the checkbox is read-only |
| `ref` | `Element` | No |  |
| `value` | `string` | No | The controlled value of the radio group |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the radio-group |
| `[data-disabled]` | Present when disabled |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the indicator |


**Indicator CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--transition-property` | The transition property value for the Indicator |
| `--left` | The left position value |
| `--top` | The top position value |
| `--width` | The width of the element |
| `--height` | The height of the element |


**ItemContext Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseRadioGroupItemContext]>` | Yes |  |


**ItemControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | item-control |
| `[data-active]` | Present when active or pressed |


**ItemHiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No |  |
| `invalid` | `boolean` | No |  |
| `ref` | `Element` | No |  |


**ItemText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | radio-group |
| `[data-part]` | label |
| `[data-orientation]` | The orientation of the label |
| `[data-disabled]` | Present when disabled |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseRadioGroupReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string` | The current value of the radio group |
| `setValue` | `(value: string) => void` | Function to set the value of the radio group |
| `clearValue` | `VoidFunction` | Function to clear the value of the radio group |
| `focus` | `VoidFunction` | Function to focus the radio group |
| `getItemState` | `(props: ItemProps) => ItemState` | Returns the state details of a radio input |


## Accessibility

Complies with the [Radio WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).

### Keyboard Support

<KeyBindingsTable id="radio-group" />