RadioButtonField

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
• Code examples
• Content recommendations
• Accessibility

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

// import {RadioButtonField} from '@contentful/forma-36-react-components';

<RadioButtonField labelText="Label text" id="randomId" />
// import {RadioButtonField} from '@contentful/forma-36-react-components';

<RadioButtonField labelText="Label text" id="randomId" />
Hide source

Example with 2 options with helper text displayed

// import {RadioButtonField} from '@contentful/forma-36-react-components';

function RadioButtonFieldExample() {
  const [activeOption, setActiveOption] = React.useState('yes');

  return (
    <Flex flexDirection="column">
      <RadioButtonField
        name="radio option 1"
        id="randomId1"
        value="yes"
        checked={activeOption === 'yes'}
        onChange={(e) => {
          setActiveOption(e.target.value);
        }}
        labelText="Radio button checked"
        helpText="Helper text displayed below"
      />
      <RadioButtonField
        name="radio option 2"
        id="randomId2"
        value="no"
        checked={activeOption === 'no'}
        onChange={(e) => {
          setActiveOption(e.target.value);
        }}
        labelText="Second option"
        helpText="Helper text displayed below"
      />
    </Flex>
  );
}
// import {RadioButtonField} from '@contentful/forma-36-react-components';

function RadioButtonFieldExample() {
  const [activeOption, setActiveOption] = React.useState('yes');

  return (
    <Flex flexDirection="column">
      <RadioButtonField
        name="radio option 1"
        id="randomId1"
        value="yes"
        checked={activeOption === 'yes'}
        onChange={(e) => {
          setActiveOption(e.target.value);
        }}
        labelText="Radio button checked"
        helpText="Helper text displayed below"
      />
      <RadioButtonField
        name="radio option 2"
        id="randomId2"
        value="no"
        checked={activeOption === 'no'}
        onChange={(e) => {
          setActiveOption(e.target.value);
        }}
        labelText="Second option"
        helpText="Helper text displayed below"
      />
    </Flex>
  );
}
Hide source

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.