Radio

A single radio input styled to match the library's design. For a group of radios with shared state, use RadioGroup instead.

ExamplesCodeUsageChangelog

Basic usage

Option AOption BOption C

Selected: option-a

Tailwind v4

<script setup>
import { ref } from 'vue'
const picked = ref('option-a')
</script>

<template>
  <Radio v-model="picked" value="option-a" label="Option A" name="my-group" />
  <Radio v-model="picked" value="option-b" label="Option B" name="my-group" />
  <Radio v-model="picked" value="option-c" label="Option C" name="my-group" />
</template>

Disabled

Yes (disabled, checked)No (disabled)

Tailwind v4

<Radio :model-value="'yes'" value="yes" label="Yes (disabled, checked)" disabled />
<Radio :model-value="'yes'" value="no" label="No (disabled)" disabled />

Props

Prop	Type	Default	Description
modelValue	string | boolean	—	The currently selected value in the group
value	string	—	The value this radio represents
label	string	—	Visible label rendered next to the dot
disabled	boolean	false	Prevents selection
name	string	—	HTML name attribute for grouping native radio inputs

Emits

Event	Payload	Description
update:modelValue	string	The value of this radio when selected