ui/docs/content/3.forms/6.radio.md

description, links

description	links
Display a radio field.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/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

<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

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' label: 'Label' value: true props: disabled: true

::

Slots

label

Use the #label slot to override the content of the label.

::component-card

slots: label: Label baseProps: name: 'radio6'

#label [Label]{.italic} ::

Props

:component-props

Preset

:component-preset