Radio button ​

Use radio buttons to present each item in a list of options where users must make a single selection.

Usage ​

<script lang="ts" setup>
import { RadioButton } from '@returnless/focus-ui';

const radioButtonModel = ref<string | null>(null);
</script>

<template>
<FormLayout>
    <RadioButton
      v-model="radioButtonModel"
      value="comments"
      label="Comments"
      help-text="Get notified when someones posts a comment on a posting." />
    <RadioButton
      v-model="radioButtonModel"
      value="candidates"
      label="Candidates"
      help-text="Get notified when a candidate applies for a job." />
    <RadioButton
      v-model="radioButtonModel"
      value="offers"
      label="Offers"
      help-text="Get notified when a candidate accepts or rejects an offer." />
  </FormLayout>
  <pre class="mt-4"></pre>
</template>

Best practices ​

Radio buttons should:

• Always be used with an associated label component.
• Be part of list of radio buttons that:
  • Include at least two or more choices.
  • Are used to have users select only one option from a list of options.
  • Include mutually exclusive options - this means that each option must be independent of every other option in the list. For example: Red, Blue, Green, and Yellow are mutually exclusive. Read, blue, yellow, red/blue are not mutually exclusive.
• List options in a rational order that makes logical sense.
• Have a default option selected whenever possible.

Content guidelines ​

Radio button labels ​

Radio button labels should:

• Be introduced with a colon or a heading.
• Start with a capital letter.
• Not end in punctuation if it's a single sentence, word, or a fragment.

Accessibility ​

Screen readers convey the state of the radio button automatically.

• Use the disabled prop to apply the HTML disabled attribute to the radio button <input>. This prevents users from being able to interact with the radio button, and conveys its inactive state to assistive technologies.
• Use the id prop to provide a unique id attribute value for the radio button. If an id isn't provided, then the component generates one. All radio buttons must have unique id values to work correctly with assistive technologies.

Labelling ​

• The required label prop conveys the purpose of the radio button to all users.
• Use the labelHidden prop to visually hide the label but make it available to assistive technologies.
• When you provide help text via the helpText prop or an inline error message via the error prop, the help or error content is conveyed to screen reader users with the aria-describedBy attribute.

Keyboard support ​

• Move focus to the radio button group using the tab key (or shift + tab when tabbing backwards).
• Use the up and down arrow keys to change which radio button is selected.