radio button

Permits the selection of only one option from a list of two or more

import { CdrRadio } from '@rei/cedar'

Live demo

Usage

When to use

  • Allowing the selection of only one choice from a list
  • Needing to view all available options
  • Comparing between a list of selections

When not to use

  • Selecting from a list when multiple choices are allowed. Instead, use checkboxes
  • Providing a single selectable option. Instead, use a stand-alone checkbox

Content

Using in lists

  • Use a logical order, whether it’s alphabetical, numerical, or time-based
  • Labels should have approximately equal length
  • Clearly communicate the effect of selecting the option
  • Provide a link or include a subtitle for more information. Don’t rely on tooltips to explain a radio button

Labels

Do
Radio buttons with the correct sentence case.

Do use sentence case, with only proper nouns capitalized.

Don't
Radio buttons with incorrect use of title capitalization.

Don't use title caps for labels.

Do
Radio buttons with brief labels

Do make labels brief.

Don't
Radio buttons with long labels.

Don't put too much text in the label.

Do
Radio button labels with no ending punctuation.

Do write labels as sentence fragments with no ending punctuation.

Don't
Radio button labels with ending punctuation.

Don't add terminal punctuation at the end of a label.

Accessibility

What Cedar provides

Wraps the input in a label element and automatically associates it with the label.

Development responsibilities

When using this component, here's what you are responsible for:

Make each radio button focusable and keyboard accessible:

  • When radio button has focus, the space key changes the selection
  • Tab key moves to next element in list

Avoid nesting CdrFormGroup. This component should be:

  • Used when associating group of radio buttons
  • Identified or described as a group using the label property or slot

Custom radio buttons maintain accessibility requirements. The radio button icon is only visually hidden and replaced with custom style.

Component variables

For projects that cannot make use of the Vue.js component, the CdrLabelWrapper styles are available through the @rei/cdr-component-variables package as SCSS and LESS mixins. These can be applied to plain HTML elements. See examples on the component variable page.

Implementation

The CdrRadio component requires v-model to track the value of selected radios.

Use the hide-figure modifier to hide the radio button itself. This leaves the text label as the clickable element. Add appropriate custom styles to convey selected and unselected states.

<template>
  <cdr-radio
    name="example"
    custom-value="model1"
    v-model="model"
    modifier="hide-figure"
    input-class="no-box"
    content-class="no-box__content"
  >
    Add to cart
  </cdr-radio>
</template>
<style>
.no-box:checked ~ .no-box__content {
   color: green;

   &::after {
     content: '(checked)';
   }
 }
</style>

API

CdrRadio

Props

NameTypeDefault
labelClass

Adds CSS class to the label for custom styles.

string
inputClass

Adds CSS class to the input for custom styles.

string
contentClass

Adds CSS class to the slot wrapper for custom styles.

string
disabled

Disables the radio

boolean
name
Required

Sets the name of the radio button.

string
modifier

Modifies the style variants for this component Possible values: hide-figure

string''
size

Sets the radio size; values can target responsive breakpoints. Example `small@lg` Possible values: small, medium, large

sizeProps
background

Sets the background color the radio button is rendered on Possible values: primary, secondary

backgroundProps
customValue

Sets the value of the radio.

string|number|boolean|object|array|symbol|func
modelValue

string|number|boolean|object|array|symbol|func

Slots

Name
default

Events

NameParameters
update:modelValue

Event emitted by v-model on the radio's <input> element

modelValue