Menu
Documentation
v4.0.0-beta.4

Radio

<BaseRadio /> · A simple radio component.

View SourceOpen Issue
vue
<template>
  <BaseRadioGroup v-model="value">
    <BaseRadio
      label="Option 1"
      value="Option 1"
    />
    <BaseRadio
      label="Option 2"
      value="Option 2"
    />
    <BaseRadio
      value="Option 3"
      label="Option 3"
    />
  </BaseRadioGroup>
</template>

<script setup lang="ts">
const value = ref('Option 1')
</script>

Features

  • Full keyboard navigation
  • Supports horizontal/vertical orientation
  • Can be controlled or uncontrolled

Anatomy

The Group component is a container for the Radio components. The Radio component is a simple radio button.

vue
<template>
  <BaseRadioGroup>
    <BaseRadio />
    <BaseRadio />
    <BaseRadio />
  </BaseRadioGroup>
</template>

API Reference

This component has props that you can use to modify its visual style.

Group

Model Type
model-value
AcceptableValue

The controlled value of the radio item to check. Can be binded as `v-model`.

Prop Type
items
default:[]
BaseRadioProps[]
default-value
default:-
AcceptableValue

The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.

disabled
default:-
boolean

When `true`, prevents the user from interacting with radio items.

orientation
default:-
DataOrientation

The orientation of the component.

dir
default:-
Direction

The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.

loop
default:-
boolean

When `true`, keyboard navigation will loop from last item to first, and vice versa.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

name
default:-
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
default:-
boolean

When `true`, indicates that the user must set the value before the owning form can be submitted.

Slot Type
#default
any

Radio

Prop Type
label
default:-
string

The label for the radio input.

variant
default:"default"
"default" | "primary" | "dark" | "none"

The variant of the radio.

classes
default:{}
{ root?: string | string[]; indicator?: string | string[]; label?: string | string[]; labelWrapper?: string | string[]; }

Optional classes to pass to the inner components.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

disabled
default:-
boolean

When `true`, prevents the user from interacting with the radio item.

name
default:-
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
default:-
boolean

When `true`, indicates that the user must set the value before the owning form can be submitted.

value
default:-
AcceptableValue

The value given as data when submitted with a `name`.

id
default:-
string
Event Emitted Value Type
select
[event: any]
Slot Type
#default
any
#error
any

Examples

Variants

Use the variant prop to change the color of the radio.

vue
<template>
  <BaseRadioGroup v-model="value">
    <BaseRadio
      value="Option 1"
      label="Option 1"
      variant="primary"
    />
  </BaseRadioGroup>
</template>

<script setup lang="ts">
const value = ref('Option 1')
</script>

Custom variants

Set the variant prop to none and use tailwind classes to customize the radio.

vue
<template>
  <BaseRadioGroup v-model="value">
    <BaseRadio
      value="Option 1"
      label="Option 1"
      variant="none"
      class="bg-green-500/10 dark:bg-green-500/20 border-1 border-muted-300 dark:border-muted-700 text-green-700 dark:text-green-400"
    />
  </BaseRadioGroup>
</template>

<script setup lang="ts">
const value = ref('Option 1')
</script>

Prose

Select