RadioGroup

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Default

Comfortable

Compact

TailwindCSSCSS

<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@oku-ui/primitives'
import { ref } from 'vue'

const radioStateSingle = ref('default')
</script>

<template>
  <RadioGroupRoot
    v-model="radioStateSingle"
    class="flex flex-col gap-2.5"
    default-value="default"
    aria-label="View density"
  >
    <div class="flex items-center">
      <RadioGroupItem
        id="r1"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="default"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-mauve12"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r1"
      >
        Default
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r2"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="comfortable"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-mauve12"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r2"
      >
        Comfortable
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r3"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="compact"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-mauve12"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r3"
      >
        Compact
      </label>
    </div>
  </RadioGroupRoot>
</template>

Features

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

Installation

Install the component from your command line.

$ npm add @oku-ui/primitives

Anatomy

Import all parts and piece them together.

<script setup>
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '@oku-ui/primitives'
</script>

<template>
  <RadioGroupRoot>
    <RadioGroupItem>
      <RadioGroupIndicator />
    </RadioGroupItem>
  </RadioGroupRoot>
</template>

API Reference

Root

Contains all the parts of a radio group.

Prop	Default	Type
defaultValue		string
dir		'ltr' | 'rtl'
disabled		boolean
loop		boolean
name		string
orientation		'horizontal' | 'vertical'
required		boolean
value		string

Emit	Payload
update:value	[value: string]

Data Attribute	Value
[data-disabled]	Present when disabled

Item

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

Prop	Default	Type
as	'div'	object | AsTag
disabled		boolean
name		string
value*		string

Data Attribute	Value
[data-state]	"checked" | "unchecked"
[data-disabled]	Present when disabled

Indicator

Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Prop	Default	Type
as	'div'	object | AsTag
forceMount		boolean Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Data Attribute	Value
[data-state]	"checked" | "unchecked"
[data-disabled]	Present when disabled

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

Keyboard Interactions

Key	Description
Tab	Moves focus to either the checked radio item or the first radio item in the group.
Space	When focus is on an unchecked radio item, checks it.
ArrowDown	Moves focus and checks the next radio item in the group.
ArrowRight	Moves focus and checks the next radio item in the group.
ArrowUp	Moves focus to the previous radio item in the group.
ArrowLeft	Moves focus to the previous radio item in the group.