Radio

Import

import { Radio } from '@contentful/f36-components';
// or
import { Radio } from '@contentful/f36-forms';

Examples

Using as a controlled input

Controlled components in React are those in which form data is handled by the component’s state.

For using the Radio as a controlled input, you need to:

• Pass the isChecked property, with this property it will already be a controlled component;
• Pass a onChange handler, so you can use it to update the value of isChecked;

Setting the isChecked will already define it as a controlled input.

Hide code
function RadioGroupExample() {
  const [value, setValue] = useState('no');
  return (
    <Stack flexDirection="row">
      <Radio
        id="radio1"
        name="radio-controlled"
        value="yes"
        isChecked={value === 'yes'}
        onChange={() => setValue('yes')}
      >
        Yes
      </Radio>
      <Radio
        id="radio2"
        name="radio-controlled"
        value="no"
        isChecked={value === 'no'}
        onChange={() => setValue('no')}
      >
        No
      </Radio>
    </Stack>
  );
}
function RadioGroupExample() {
  const [value, setValue] = useState('no');
  return (
    <Stack flexDirection="row">
      <Radio
        id="radio1"
        name="radio-controlled"
        value="yes"
        isChecked={value === 'yes'}
        onChange={() => setValue('yes')}
      >
        Yes
      </Radio>
      <Radio
        id="radio2"
        name="radio-controlled"
        value="no"
        isChecked={value === 'no'}
        onChange={() => setValue('no')}
      >
        No
      </Radio>
    </Stack>
  );
}
Open in Playground

Using as an uncontrolled input

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the Radio as an uncontrolled input, for that you can:

• Set the defaultChecked property, it will ensure that the checked state can be altered normally.
• Don't set the isChecked as it will make the input controlled.

Hide code
function RadioUncontrolledExample() {
  return (
    <Stack flexDirection="row">
      <Radio
        id="radio1"
        name="radio-uncontrolled"
        value="yes"
        defaultChecked={true}
      >
        Yes
      </Radio>
      <Radio id="radio2" name="radio-uncontrolled" value="no">
        No
      </Radio>
    </Stack>
  );
}
function RadioUncontrolledExample() {
  return (
    <Stack flexDirection="row">
      <Radio
        id="radio1"
        name="radio-uncontrolled"
        value="yes"
        defaultChecked={true}
      >
        Yes
      </Radio>
      <Radio id="radio2" name="radio-uncontrolled" value="no">
        No
      </Radio>
    </Stack>
  );
}
Open in Playground

Using with Radio.Group

We also provide the Radio.Group component that helps when using multiple radios. You can pass some common properties on the Radio.Group level and they will be passed to the radios inside the group.

• spacing: This will set how much space should be between the inputs;
• name: By setting this property on the Radio.Group level, you will set it automatically for all the radios in the group;
• defaultValue: This accepts a value that set the defaultChecked property for the radio that have the same value (uncontrolled);
• value: Same as defaultValue but this one sets the isChecked property, making the radio group controlled (controlled);
• onChange: Handler that will be executed when any radio inside the group receives the event of change.

Radio.Group is a recommended way of using Radio when using it within forms.

Hide code
function RadioGroupExample() {
  const [role, setRole] = useState('admin');
  return (
    <FormControl as="fieldset">
      <FormControl.Label as="legend" marginBottom="none">
        Permissions
      </FormControl.Label>
      <Paragraph>User permissions within this space</Paragraph>
      <Radio.Group
        name="permission"
        value={role}
        onChange={(e) => {
          setRole(e.target.value);
        }}
      >
        <Radio value="admin" helpText="Can create, modify and delete content">
          Admin
        </Radio>
        <Radio value="author" helpText="Can create and modify content">
          Author
        </Radio>
        <Radio
          value="translator"
          isDisabled
          helpText="Can only modify specific locale"
        >
          Translator (disabled)
        </Radio>
      </Radio.Group>
    </FormControl>
  );
}
function RadioGroupExample() {
  const [role, setRole] = useState('admin');
  return (
    <FormControl as="fieldset">
      <FormControl.Label as="legend" marginBottom="none">
        Permissions
      </FormControl.Label>
      <Paragraph>User permissions within this space</Paragraph>
      <Radio.Group
        name="permission"
        value={role}
        onChange={(e) => {
          setRole(e.target.value);
        }}
      >
        <Radio value="admin" helpText="Can create, modify and delete content">
          Admin
        </Radio>
        <Radio value="author" helpText="Can create and modify content">
          Author
        </Radio>
        <Radio
          value="translator"
          isDisabled
          helpText="Can only modify specific locale"
        >
          Translator (disabled)
        </Radio>
      </Radio.Group>
    </FormControl>
  );
}
Open in Playground

Content guidelines

• Use direct, succinct copy that helps a user to successfully complete a form, for example, “Dinner menu (select 1 of 3 options)“
• Do not use punctuation for labels, for example, “Vegetarian“ instead of “Vegetarian.“
• Use sentence style caps in which only the first word of a sentence or term is capitalized, for example, “Dairy free“ instead of “Dairy Free“

Accessibility

• To ensure Radio meets accessibility keyboard standards, set the name and id properties.

Radio Group

• Set the name prop to give each indivual value the same name
• The Radio.Group should be wrapped in a <FormControl as="fieldset">
• In order to easier identify the indivual Radio options as a group and set a label via <FormControl.Label as="legend">. For example, “Dinner menu (select 1 of 3 options): (x) Menu 1, () Menu 2, () Menu 3.”
• For more information about validation and controlling form fields, please refer to FormControl.

Keyboard Usage

• To switch between options with the keyboard, use the “tab + space” and the arrow keys (“←”, ”↑”, “→”, and “↓”).

Radio

Radio.Group

Density support

This component supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density when wrapped with the Density Container.