# 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

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.

<Anatomy id="radio-group" />

## Examples

Learn how to use the `RadioGroup` component in your project. Let's take a look at the most basic example:

**Example: basic**

#### React

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

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

  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.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { Index } from 'solid-js'

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

  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.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </Index>
    </RadioGroup.Root>
  )
}

```

#### Vue

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

const frameworks = ref(['React', 'Solid', 'Vue', 'Svelte'])
</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.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

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

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

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

```

### Disabling the radio group

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

**Example: disabled**

#### React

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

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

  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.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { Index } from 'solid-js'

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

  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.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </Index>
    </RadioGroup.Root>
  )
}

```

#### Vue

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

const frameworks = ref(['React', 'Solid', 'Vue', 'Svelte'])
</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.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { RadioGroup } from '@ark-ui/svelte/radio-group'

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

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

```

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

**Example: initial-value**

#### React

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

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

  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.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { Index } from 'solid-js'

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

  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.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </Index>
    </RadioGroup.Root>
  )
}

```

#### Vue

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

const frameworks = ref(['React', 'Solid', 'Vue', 'Svelte'])
</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.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { RadioGroup } from '@ark-ui/svelte/radio-group'

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

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

```

### Listening for changes

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

**Example: on-event**

#### React

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

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

  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.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

```

#### Solid

```tsx
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { Index } from 'solid-js'

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

  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.ItemHiddenInput />
          </RadioGroup.Item>
        )}
      </Index>
    </RadioGroup.Root>
  )
}

```

#### Vue

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

const frameworks = ref(['React', 'Solid', 'Vue', 'Svelte'])
</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.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { RadioGroup } from '@ark-ui/svelte/radio-group'

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

<RadioGroup.Root onValueChange={(details) => console.log(details.value)}>
  <RadioGroup.Label>Framework</RadioGroup.Label>
  {#each frameworks as framework}
    <RadioGroup.Item value={framework}>
      <RadioGroup.ItemText>{framework}</RadioGroup.ItemText>
      <RadioGroup.ItemControl />
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.Root>

```

### Using the Root Provider

The `RootProvider` component provides a context for the radio-group. It accepts the value of the `useRadio-group` hook.
You can leverage it to access the component state and methods from outside the radio-group.

**Example: root-provider**

#### React

```tsx
import { RadioGroup, useRadioGroup } from '@ark-ui/react/radio-group'

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

  const radioGroup = useRadioGroup()

  return (
    <>
      <button onClick={() => radioGroup.focus()}>Focus</button>

      <RadioGroup.RootProvider value={radioGroup}>
        <RadioGroup.Label>Framework</RadioGroup.Label>
        <RadioGroup.Indicator />
        {frameworks.map((framework) => (
          <RadioGroup.Item key={framework} value={framework}>
            <RadioGroup.ItemText>{framework}</RadioGroup.ItemText>
            <RadioGroup.ItemControl />
            <RadioGroup.ItemHiddenInput />
          </RadioGroup.Item>
        ))}
      </RadioGroup.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { RadioGroup, useRadioGroup } from '@ark-ui/solid/radio-group'
import { Index } from 'solid-js'

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

  const radioGroup = useRadioGroup()

  return (
    <>
      <button onClick={() => radioGroup().focus()}>Focus</button>

      <RadioGroup.RootProvider value={radioGroup}>
        <RadioGroup.Label>Framework</RadioGroup.Label>
        <RadioGroup.Indicator />
        <Index each={frameworks}>
          {(framework) => (
            <RadioGroup.Item value={framework()}>
              <RadioGroup.ItemText>{framework()}</RadioGroup.ItemText>
              <RadioGroup.ItemControl />
              <RadioGroup.ItemHiddenInput />
            </RadioGroup.Item>
          )}
        </Index>
      </RadioGroup.RootProvider>
    </>
  )
}

```

#### Vue

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

const frameworks = ref(['React', 'Solid', 'Vue', 'Svelte'])

const radioGroup = useRadioGroup()
</script>

<template>
  <button @click="radioGroup.focus()">Focus</button>

  <RadioGroup.RootProvider :value="radioGroup">
    <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.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.RootProvider>
</template>

```

#### Svelte

```svelte
<script>
  import { RadioGroup, useRadioGroup } from '@ark-ui/svelte/radio-group'

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

  const id = $props.id()
  const radioGroup = useRadioGroup({ id })
</script>

<button onclick={() => radioGroup().focus()}>Focus</button>

<RadioGroup.RootProvider value={radioGroup}>
  <RadioGroup.Label>Framework</RadioGroup.Label>
  <RadioGroup.Indicator />
  {#each frameworks as framework}
    <RadioGroup.Item value={framework}>
      <RadioGroup.ItemText>{framework}</RadioGroup.ItemText>
      <RadioGroup.ItemControl />
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.RootProvider>

```

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## Guides

### Using `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>
```

### Why `ItemHiddenInput` is required

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 |


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


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


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


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

These are the properties available when using `UradioUgroup.Context`, `useUradioUgroupContext` hook or `useUradioUgroup` hook.

**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" />