Design System

      Radio Button

      Figma LibraryLocal HTMLGlobal HTMLReact
      considering
      stable
      beta
      beta

      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"
/>;

      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.