Radio Group

Radio groups allow users to choose only one selection from a group of at least two options.

Code

Installation

yarn add @twilio-labs/match formik

Usage

import { Formik } from "formik";
import { Radio, RadioGroup } from "@twilio-labs/match/components";
const Component = () => (
<Formik initialValues={{ email: "" }} onSubmit={() => {}}>
<RadioGroup groupLabel="How many emails do you send every month?" required>
<Radio name="email" value="1" label="0 - 5,000" />
<Radio name="email" value="2" label="5,001 - 15,000" />
<Radio name="email" value="3" label="25,001 - 50,000" />
<Radio name="email" value="4" label="Over 50,000" />
</RadioGroup>
</Formik>
);

Radio Group Props

PropTypeDefaultDescription
groupLabelstringnullSets the label for the group
size?RadioSize'normal''normal', 'small'
required?booleannullSets the group to be required
disabled?booleannullSets the group to disables
readOnly?booleannullSets the radio button as readonly
additional?stringnullSupporting information
horizontal?booleannullSets the alignment to horizontal
validate?(value: string) => stringnullOverrides built in validation
noValidate?booleannullDisables built in validation

Also supports margin props.

Radio Props

PropTypeDefaultDescription
namestringnull
labelstringnull
valuestringnull
size?RadioSize'normal''normal', 'small'
disabled?booleannullDisables the radio button
readOnly?booleannullSets the radio button as readonly
additional?stringnullSupporting information
required?booleannullSets the group to be required
validate?(value: string) => stringnullOverrides built in validation
noValidate?booleannullDisables built in validation

Also supports margin props.


Guidelines

About Inputs

Radio groups are used in forms when a user has to select a single option from two or more options. Options should be presented in a logical order and there should be no more than 10 options.

Accessibility

  • Use the label prop to convey an option.
  • Use additional text to provide extra context when needed.
  • Labels should be presented after the radio button.
  • Keep labels and additional text brief and descriptive for users using assistive technology, so they can understand the question clearly.

Composition

All radio groups should have a group label, that indicates the question the user will be answering by selecting a radio button. Additionally, all individual radio buttons must have a label that informs the user what option is associated with that radio button. Both group labels and labels should be short and descriptive.

Additional text can be used on the Radio Group to expand on the instruction or the question being asked. Additional text can be used on individual Radio components to expand on the option or the meaning of the label. Keep supplemental text concise and relevant to the Radio Group and Radio buttons.

A Radio Group can be set as required. Setting it to required adds the required indicator next to the group label and adds validation to make sure that one of the radio buttons is selected upon submitting the form. If a radio group is "optional" users will not be able to unselect an option. If you need to give users a way to unselect an option consider adding a clear button or use a different form field.

Make sure all Radios within a RadioGroup use the same name.

Do
  • Use radio buttons in a radio group with at least two or more choices - where a user must select one option only.
  • List options in a logical order that makes sense to your users such as in order of the most common selections or in numerical order.
  • Consider using the select component when list options exceed around 10 choices.
Don't
  • Don't use a radio button on its own.
  • Don't randomize the list options in a way that users will find confusing.
  • Don't have a long list of radio buttons that may overwhelm users.

Examples

Vertically Stacked Radio Group

The default Radio Group is vertically stacked. This style of Radio Group works well for longer content.

How many emails do you send every month?

Horizontal Radio Group

The prop horizontal can be used to align options horizontally. Horizontal Radio Groups work best when labels are numbers/ranges or a single word. Additional text should not be used for Radios that are part of a horizontal Radio Group.

How often would you like newsletters delivered to your inbox?

Additional text

The prop additional can be used on the Radio Group to supply additional information that is relevant to the entire group. The prop additional can be used on an individual Radio to provide supplemental information for that option.

Who inspires you the most?
Choose one individual who you aspire to be like or who you enjoy reading about!

Civil rights activist

Civil rights leader and former president of South Africa

Theoretical physicist

Leader of the Union and former US president

Nobel laureate and charitable work

Error on RadioGroup

A required Radio Group will automatically check to make sure one of the options is selected upon submitting.

How many emails do you send every month?

This can be overridden using the validate prop. Validation can be turned off using the noValidate prop.

Select your favorite food:

Disabled Radio Group

A Radio Group may be disabled using the disabled prop on the Radio Group. There is no need to set each Radio as disabled as the Radio Group will automatically set each as disabled.

How many emails do you send every month?

Read Only Radio Group

Setting readOnly on the Radio Group will sets every Radio to disabled so it can not be interacted with and styles the Radio to correspond with other read only form elements. An example of when to use a read-only Radio Group may be displaying a user's responses on a confirmation page.

How many emails do you send every month?