---
description: Display a radio field.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Radio.vue
---

## Usage

Use a `v-model` to make the Radio reactive.

::component-example
#default
:radio-example

#code
```vue
<script setup>
const methods = [{
  name: 'email',
  value: 'email',
  label: 'Email'
}, {
  name: 'sms',
  value: 'sms',
  label: 'Phone (SMS)'
}, {
  name: 'push',
  value: 'push',
  label: 'Push notification'
}]

const selected = ref('sms')
</script>

<template>
  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
</template>
```
::

### Label

Use the `label` prop to display a label on the right.

::component-card
---
baseProps:
  name: 'radio1'
props:
  label: 'Label'
---
::

### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}

Use the `color` prop to change the style of the Radio.

::component-card
---
baseProps:
  name: 'radio2'
  label: 'Label'
props:
  color: 'primary'
---
::

### Required

Use the `required` prop to display a red star next to the label.

::component-card
---
baseProps:
  name: 'radio3'
props:
  label: 'Label'
  required: true
---
::

### Help

Use the `help` prop to display some text under the Radio.

::component-card
---
baseProps:
  name: 'radio4'
props:
  label: 'Label'
  help: 'Please choose one'
---
::

### Disabled

Use the `disabled` prop to disable the Radio.

::component-card
---
baseProps:
  name: 'radio5'
  value: true
props:
  disabled: true
---
::

## Props

:component-props

## Preset

:component-preset