Design System
In Review

Radio Button

Variants

Standard radio

Where do you live?

<div data-testid="govie-radios" data-module="gieds-radios" class="gi-flex">
<fieldset>
  <legend class="gi-mb-2 sm:gi-text-sm md:gi-text-md lg:gi-text-lg">
    <h2 class="gi-heading-md !gi-mb-0">Where do you live?</h2>
  </legend>
  <div data-element="radio-container" class="gi-flex gi-flex-col gi-gap-2.5">
    <div class="gi-flex gi-flex-col gi-gap-2.5">
      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-primary="true"
            data-element="radio0"
            id="UniqueId1-0"
            value="england"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-0"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            England
          </label>
        </div>
      </div>

      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-primary="true"
            data-element="radio1"
            id="UniqueId1-1"
            value="scotland"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-1"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            Scotland
          </label>
        </div>
      </div>

      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-primary="true"
            data-element="radio2"
            id="UniqueId1-2"
            value="ireland"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-2"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            Ireland
          </label>
        </div>
      </div>
    </div>
  </div>
</fieldset>
</div>

{{ govieRadiosGroup({
  "groupId": "uniqueId",
  "title": {
    "value": "Where do you live?",
    "asHeading": {
      "size": "md",
      "as": "h2"
    }
  },
  "items": [
    {
      "label": "England",
      "value": "england"
    },
    {
      "label": "Scotland",
      "value": "scotland"
    },
    {
      "label": "Ireland",
      "value": "ireland"
    }
  ]
}) }}

import { RadiosGroup } from '@govie-ds/react';

<RadiosGroup
title={{
  value: 'Where do you live?',
  asHeading: {
    size: 'md',
    as: 'h2',
  },
}}
items={[
  {
    label: 'England',
    value: 'england',
  },
  {
    label: 'Scotland',
    value: 'scotland',
  },
  {
    label: 'Ireland',
    value: 'ireland',
  },
]}
groupId="uniqueId"
/>;

Inline radio

Where do you live?

<div data-testid="govie-radios" data-module="gieds-radios" class="gi-flex">
<fieldset>
  <legend class="sm:gi-text-sm md:gi-text-md lg:gi-text-lg">
    <h2 class="gi-heading-md !gi-mb-2">Where do you live?</h2>
  </legend>
  <div data-element="radio-container" class="gi-flex gi-flex-col gi-gap-2.5">
    <div class="gi-flex gi-flex-row gi-gap-4">
      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-has-conditional-input=""
            data-primary="true"
            data-element="radio0"
            id="UniqueId1-0"
            value="england"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-0"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            England
          </label>
        </div>
      </div>

      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-has-conditional-input=""
            data-primary="true"
            data-element="radio1"
            id="UniqueId1-1"
            value="scotland"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-1"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            Scotland
          </label>
        </div>
      </div>

      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-has-conditional-input=""
            data-primary="true"
            data-element="radio2"
            id="UniqueId1-2"
            value="ireland"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-2"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            Ireland
          </label>
        </div>
      </div>
    </div>
  </div>
</fieldset>
</div>

{{ govieRadiosGroup({
  "groupId": "uniqueId",
  "inline": true,
  "title": {
    "value": "Where do you live?",
    "asHeading": {
      "size": "md",
      "as": "h2"
    }
  },
  "items": [
    {
      "label": "England",
      "value": "england"
    },
    {
      "label": "Scotland",
      "value": "scotland"
    },
    {
      "label": "Ireland",
      "value": "ireland"
    }
  ]
}) }}

import { RadiosGroup } from '@govie-ds/react';

<RadiosGroup
title={{
  value: 'Where do you live?',
  asHeading: {
    size: 'md',
    as: 'h2',
  },
}}
inline={true}
items={[
  {
    label: 'England',
    value: 'england',
  },
  {
    label: 'Scotland',
    value: 'scotland',
  },
  {
    label: 'Ireland',
    value: 'ireland',
  },
]}
groupId="uniqueId"
/>;

Radios with hints

Have you changed your name?

This includes changing your last name or spelling your name differently.
Yes, I have changed my name
No, I didn't change my name
<div data-testid="govie-radios" data-module="gieds-radios" class="gi-flex">
<fieldset>
  <legend class="sm:gi-text-sm md:gi-text-md lg:gi-text-lg">
    <h2 class="gi-heading-md !gi-mb-2">Have you changed your name?</h2>

    <div data-testid="title-hint">
      <p class="gi-text-md gi-mb-2 gi-font-normal gi-text-gray-600 !gi-mb-2">
        This includes changing your last name or spelling your name
        differently.
      </p>
    </div>
  </legend>
  <div data-element="radio-container" class="gi-flex gi-flex-col gi-gap-2.5">
    <div class="gi-flex gi-flex-col gi-gap-2.5">
      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-has-conditional-input=""
            data-primary="true"
            data-element="radio0"
            id="UniqueId1-0"
            value="no"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-0"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            Yes
          </label>
        </div>
        <div class="gi-flex gi-gap-4">
          <div
            data-conditional-divider="UniqueId1-0"
            class="gi-w-8 gi-invisible"
          >
            <div class="gi-w-8 gi-h-full gi-flex gi-justify-center gi-mt-1.5">
              <div class="gi-h-full gi-w-1 gi-bg-gray-300"></div>
            </div>
          </div>
          <div>
            <div>
              <p
                class="gi-text-md gi-mb-2 gi-font-normal gi-text-gray-600 !gi-mb-0"
              >
                Yes, I have changed my name
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="gi-flex gi-flex-col">
        <div class="gi-gap-4 gi-flex gi-items-center">
          <input
            name="UniqueId1"
            data-has-conditional-input=""
            data-primary="true"
            data-element="radio1"
            id="UniqueId1-1"
            value="no"
            class="gi-radio-medium gi-radio-base"
            type="radio"
          />
          <label
            for="UniqueId1-1"
            class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
          >
            No
          </label>
        </div>
        <div class="gi-flex gi-gap-4">
          <div
            data-conditional-divider="UniqueId1-1"
            class="gi-w-8 gi-invisible"
          >
            <div class="gi-w-8 gi-h-full gi-flex gi-justify-center gi-mt-1.5">
              <div class="gi-h-full gi-w-1 gi-bg-gray-300"></div>
            </div>
          </div>
          <div>
            <div>
              <p
                class="gi-text-md gi-mb-2 gi-font-normal gi-text-gray-600 !gi-mb-0"
              >
                No, I didn't change my name
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</fieldset>
</div>

{{ govieRadiosGroup({
  "groupId": "uniqueId",
  "title": {
    "value": "Have you changed your name?",
    "hint": "This includes changing your last name or spelling your name differently."
    "asHeading": {
      "size": "md",
      "as": "h2"
    }
  },
  "items": [
    {
      "label": "Yes",
      "value": "yes",
      hint: "Yes, I have changed my name"
    },
    {
      "label": "No",
      "value": "no",
      hint: "No, I didn't change my name"
    }
  ]
}) }}

import { RadiosGroup } from '@govie-ds/react';

<RadiosGroup
title={{
  value: 'Have you changed your name?',
  hint: 'This includes changing your last name or spelling your name differently.'
  asHeading: {
    size: 'md',
    as: 'h2',
  },
}}
inline={true}
items={[
  {
    label: 'Yes',
    value: 'yes',
    hint: 'Yes, I have changed my name',
  },
  {
    label: 'No',
    value: 'no',
    hint: "No, I didn't change my name",
  },
]}
groupId="uniqueId"
/>;

Usage

Best Practices

When to use this component

Use the radios component when users can only select one option from a list.

When not to use this component

Do not use the radios component if users might need to select more than one option. In this case, you should use the checkboxes component instead.

Status

Figma Library
Considering
Local HTML
Stable
Global HTML
Beta
Global React
Beta