Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
Forma 36

RadioButtonField

StorybookGithub
stable

Use RadioButtonField to give users the possibility to select only one option from a number of choices. It contains a radio input with its label. If needed the component can display an error message and hint message. For a multiple-choice, please consider using ChecboxField component.

Table of contents

How to use RadioButtonField

  • RadioButtonField should be used in a group. Please include at least two or more choices for users
  • Options provided for users should be mutually exclusive.
  • Make sure choices don’t overlap. Avoid patterns like: 1990-2000, 2000-2010.
  • Be explicit about the action that will follow if the radio button is selected

Code examples

Basic usage

Example with 2 options with helper text displayed

Content recommendations

  • Labels should be concise and provide context.
  • Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized)

Accessibility

  • Radio buttons should have a clear and concise label.