Radios

Standard

Default

A default radios group lets users select a single option from a list.

Have you changed your name?

Yes

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">Have you changed your name?</legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" type="radio" id="changed-name" name="changed-name" value="yes">
        <label class="govuk-label govuk-radios__label" for="changed-name">Yes</label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" type="radio" id="changed-name-2" name="changed-name" value="no">
        <label class="govuk-label govuk-radios__label" for="changed-name-2">No</label>
      </div>
    </div>
  </fieldset>
</div>

---
import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset>
    <FieldsetLegend>Have you changed your name?</FieldsetLegend>
    <Radios>
      <RadioItem>
        <RadioInput id="changed-name" name="changed-name" value="yes" />
        <InputLabel for="changed-name" class="govuk-radios__label">Yes</InputLabel>
      </RadioItem>
      <RadioItem>
        <RadioInput id="changed-name-2" name="changed-name" value="no" />
        <InputLabel for="changed-name-2" class="govuk-radios__label">No</InputLabel>
      </RadioItem>
    </Radios>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>Have you changed your name?</FieldsetLegend>
        <Radios>
          <RadioItem>
            <RadioInput id="changed-name" name="changed-name" value="yes" />
            <InputLabel htmlFor="changed-name" className="govuk-radios__label">Yes</InputLabel>
          </RadioItem>
          <RadioItem>
            <RadioInput id="changed-name-2" name="changed-name" value="no" />
            <InputLabel htmlFor="changed-name-2" className="govuk-radios__label">No</InputLabel>
          </RadioItem>
        </Radios>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset>
    <FieldsetLegend>Have you changed your name?</FieldsetLegend>
    <Radios>
      <RadioItem>
        <RadioInput id="changed-name" name="changed-name" value="yes" />
        <InputLabel for="changed-name" class="govuk-radios__label">Yes</InputLabel>
      </RadioItem>
      <RadioItem>
        <RadioInput id="changed-name-2" name="changed-name" value="no" />
        <InputLabel for="changed-name-2" class="govuk-radios__label">No</InputLabel>
      </RadioItem>
    </Radios>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>Have you changed your name?</FieldsetLegend>
        <Radios>
          <RadioItem>
            <RadioInput id="changed-name" name="changed-name" value="yes" />
            <InputLabel for="changed-name" class="govuk-radios__label">Yes</InputLabel>
          </RadioItem>
          <RadioItem>
            <RadioInput id="changed-name-2" name="changed-name" value="no" />
            <InputLabel for="changed-name-2" class="govuk-radios__label">No</InputLabel>
          </RadioItem>
        </Radios>
      </Fieldset>
    </FormGroup>
  );
}

Inline

Use inline radios to display the options on a single line where there is enough space and only two options.

Yes

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" type="radio" id="changed-name-inline" name="changed-name-inline" value="yes">
    <label class="govuk-label govuk-radios__label" for="changed-name-inline">Yes</label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" type="radio" id="changed-name-inline-2" name="changed-name-inline" value="no">
    <label class="govuk-label govuk-radios__label" for="changed-name-inline-2">No</label>
  </div>
</div>

---
import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset>
    <FieldsetLegend>Have you changed your name?</FieldsetLegend>
    <Radios inline>
      <RadioItem>
        <RadioInput id="changed-name-inline" name="changed-name-inline" value="yes" />
        <InputLabel for="changed-name-inline" class="govuk-radios__label">Yes</InputLabel>
      </RadioItem>
      <RadioItem>
        <RadioInput id="changed-name-inline-2" name="changed-name-inline" value="no" />
        <InputLabel for="changed-name-inline-2" class="govuk-radios__label">No</InputLabel>
      </RadioItem>
    </Radios>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>Have you changed your name?</FieldsetLegend>
        <Radios inline>
          <RadioItem>
            <RadioInput id="changed-name-inline" name="changed-name-inline" value="yes" />
            <InputLabel htmlFor="changed-name-inline" className="govuk-radios__label">Yes</InputLabel>
          </RadioItem>
          <RadioItem>
            <RadioInput id="changed-name-inline-2" name="changed-name-inline" value="no" />
            <InputLabel htmlFor="changed-name-inline-2" className="govuk-radios__label">No</InputLabel>
          </RadioItem>
        </Radios>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset>
    <FieldsetLegend>Have you changed your name?</FieldsetLegend>
    <Radios inline>
      <RadioItem>
        <RadioInput id="changed-name-inline" name="changed-name-inline" value="yes" />
        <InputLabel for="changed-name-inline" class="govuk-radios__label">Yes</InputLabel>
      </RadioItem>
      <RadioItem>
        <RadioInput id="changed-name-inline-2" name="changed-name-inline" value="no" />
        <InputLabel for="changed-name-inline-2" class="govuk-radios__label">No</InputLabel>
      </RadioItem>
    </Radios>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>Have you changed your name?</FieldsetLegend>
        <Radios inline>
          <RadioItem>
            <RadioInput id="changed-name-inline" name="changed-name-inline" value="yes" />
            <InputLabel for="changed-name-inline" class="govuk-radios__label">Yes</InputLabel>
          </RadioItem>
          <RadioItem>
            <RadioInput id="changed-name-inline-2" name="changed-name-inline" value="no" />
            <InputLabel for="changed-name-inline-2" class="govuk-radios__label">No</InputLabel>
          </RadioItem>
        </Radios>
      </Fieldset>
    </FormGroup>
  );
}

Small

Use small radios when the user is unlikely to want to change their answer, or in a densely populated interface.

Yes

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-radios govuk-radios--small" data-module="govuk-radios">
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" type="radio" id="changed-name-small" name="changed-name-small" value="yes">
    <label class="govuk-label govuk-radios__label" for="changed-name-small">Yes</label>
  </div>
  <div class="govuk-radios__item">
    <input class="govuk-radios__input" type="radio" id="changed-name-small-2" name="changed-name-small" value="no">
    <label class="govuk-label govuk-radios__label" for="changed-name-small-2">No</label>
  </div>
</div>

---
import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset>
    <FieldsetLegend>Have you changed your name?</FieldsetLegend>
    <Radios small>
      <RadioItem>
        <RadioInput id="changed-name-small" name="changed-name-small" value="yes" />
        <InputLabel for="changed-name-small" class="govuk-radios__label">Yes</InputLabel>
      </RadioItem>
      <RadioItem>
        <RadioInput id="changed-name-small-2" name="changed-name-small" value="no" />
        <InputLabel for="changed-name-small-2" class="govuk-radios__label">No</InputLabel>
      </RadioItem>
    </Radios>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>Have you changed your name?</FieldsetLegend>
        <Radios small>
          <RadioItem>
            <RadioInput id="changed-name-small" name="changed-name-small" value="yes" />
            <InputLabel htmlFor="changed-name-small" className="govuk-radios__label">Yes</InputLabel>
          </RadioItem>
          <RadioItem>
            <RadioInput id="changed-name-small-2" name="changed-name-small" value="no" />
            <InputLabel htmlFor="changed-name-small-2" className="govuk-radios__label">No</InputLabel>
          </RadioItem>
        </Radios>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset>
    <FieldsetLegend>Have you changed your name?</FieldsetLegend>
    <Radios small>
      <RadioItem>
        <RadioInput id="changed-name-small" name="changed-name-small" value="yes" />
        <InputLabel for="changed-name-small" class="govuk-radios__label">Yes</InputLabel>
      </RadioItem>
      <RadioItem>
        <RadioInput id="changed-name-small-2" name="changed-name-small" value="no" />
        <InputLabel for="changed-name-small-2" class="govuk-radios__label">No</InputLabel>
      </RadioItem>
    </Radios>
  </Fieldset>
</FormGroup>

import { FormGroup, Fieldset, FieldsetLegend, Radios, RadioItem, RadioInput, InputLabel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset>
        <FieldsetLegend>Have you changed your name?</FieldsetLegend>
        <Radios small>
          <RadioItem>
            <RadioInput id="changed-name-small" name="changed-name-small" value="yes" />
            <InputLabel for="changed-name-small" class="govuk-radios__label">Yes</InputLabel>
          </RadioItem>
          <RadioItem>
            <RadioInput id="changed-name-small-2" name="changed-name-small" value="no" />
            <InputLabel for="changed-name-small-2" class="govuk-radios__label">No</InputLabel>
          </RadioItem>
        </Radios>
      </Fieldset>
    </FormGroup>
  );
}

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.