Overview

This is a radio button component:

Current value: val-b

A radio button is used to make a single selection from a group of options. Radio buttons should be used instead of checkboxes if only one option can be selected.

Layout

  • Align with container margin
  • Stack vertically in lists
  • Avoid nesting radio buttons

Label

  • Labels should be short and concise
  • Labels should be positioned above the radio button group

Guidelines

  • There must always be exactly one radio button selected within a group
  • If the user is allowed to not select any of the options, provide a "None" option
  • By default, the first radio option is selected, but may be configured to have any option preselected

Props

Name Description Type Default Required
label
Label text
string true
v-model
Component data with which to associate this radio button and its siblings
string|number|boolean true
value
Unique value that will be assigned to v-model data when this radio button is selected
string|number|boolean true
description
If provided, description underneath label text
string null
disabled
Whether or not the field is disabled
boolean false
autofocus
Whether or not to auto-focus on mount
boolean false

Events

Name Description
keydown
Emitted with keydown events
change
Emitted on each change with new boolean of button state
input
Used to set value to v-model when checked

Slots

Name Description
default
Shown below label text and description

Methods

Name Description
focus
Puts keyboard focus on the radiobutton