Components

Radios

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

See the GOV.UK Design System documentation on radios for more information on when to use this component.

Where do you live?

<gv-radios legend="Where do you live?" :legend-is-page-heading="true" legend-class="govuk-fieldset__legend--l">
  <gv-radio value="england">England</gv-radio>
  <gv-radio value="scotland">Scotland</gv-radio>
  <gv-radio value="wales">Wales</gv-radio>
  <gv-radio value="northern-ireland">Northern Ireland</gv-radio>
</gv-radios>

Using v-model and value with radios

The radios component supports the same v-model binding behaviour as <input type="radio">.

Each radio item needs a value. The value of v-model will be set to the value of the selected radio item.

values can be simple types, like strings or numbers, or more complex objects.

Where do you live?

<script setup lang="ts">
import { ref } from 'vue'

const countries = [
  { name: 'England', phone: '020 7946 0234'},
  { name: 'Scotland', phone: '0141 496 0192'},
  { name: 'Wales', phone: '029 2018 0482'},
  { name: 'Northern Ireland', phone: '028 9649 6912'},
]

const selectedCountry = ref(null)
</script>

<template>
  <gv-radios 
    v-model="selectedCountry"
    legend="Where do you live?" 
    :legend-is-page-heading="true" 
    legend-class="govuk-fieldset__legend--l"
  >
    <gv-radio 
      v-for="country in countries" 
      :key="country.name" 
      :value="country"
    >
      {{ country.name }}
    </gv-radio>
  </gv-radios>
  
  <gv-inset-text v-if="selectedCountry" aria-live="polite">
    The helpline number for {{ selectedCountry.name }} is {{ selectedCountry.phone }}
  </gv-inset-text>
</template>

Inline radios

Set the direction prop to inline to show checkboxes side-by-side on larger screens.

Have you changed your name?

This includes changing your last name or spelling your name differently.
<gv-radios 
  legend="Have you changed your name?"
  :legend-is-page-heading="true"
  legend-class="govuk-fieldset__legend--l"
  hint="This includes changing your last name or spelling your name differently."
  direction="inline"
>
  <gv-radio :value="true">Yes</gv-radio>
  <gv-radio :value="false">No</gv-radio>
</gv-radios>

Showing hints

You can add hints to both the checkbox group and individual checkboxes using the hint prop or slot.

How do you want to sign in?

You’ll need an account to prove your identity and complete your Self Assessment.
You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. 
<gv-radios legend="How do you want to sign in?" :legend-is-page-heading="true" legend-class="govuk-fieldset__legend--l">
  <template #hint>
    You’ll need an account to prove your identity and complete your Self Assessment.
  </template>
  <gv-radio value="gateway">
    Sign in with Government Gateway
    <template #hint>
      You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
    </template>
  </gv-radio>
  <gv-radio value="verify">
    Sign in with GOV.UK Verify
    <template #hint>
      You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, 
      Experian, Post Office, Royal Mail or SecureIdentity.
    </template>
  </gv-radio>
</gv-radios>

Radio items with a text divider

Set the divider prop to show a text divider above an option. The text is usually the word 'or'.

Where do you live?

or
<gv-radios legend="Where do you live?" :legend-is-page-heading="true" legend-class="govuk-fieldset__legend--l">
  <gv-radio value="england">England</gv-radio>
  <gv-radio value="scotland">Scotland</gv-radio>
  <gv-radio value="wales">Wales</gv-radio>
  <gv-radio value="northern-ireland">Northern Ireland</gv-radio>
  <gv-radio divider="or" value="abroad">I am a British citizen living abroad</gv-radio>
</gv-radios>

Use the conditional slot to show a related question when an option is selected.

How would you prefer to be contacted?

Select one option. 
<gv-radios
  :legend-is-page-heading="true"
  legend-class="govuk-fieldset__legend--l"
>
  <template #legend>
    How would you prefer to be contacted?
  </template>
  <template #hint>
    Select one option.
  </template>
  <gv-radio value="email"> 
    Email
    <template #conditional>
      <gv-input label="Email address" class="govuk-!-width-one-half" type="email" :spellcheck="false" autocomplete="email"/>
    </template>
  </gv-radio>
  <gv-radio value="phone">
    Phone
    <template #conditional>
      <gv-input label="Phone number" class="govuk-!-width-one-half" type="tel" autocomplete="tel"/>
    </template>
  </gv-radio>
  <gv-radio value="text">
    Text message
    <template #conditional>
      <gv-input label="Mobile phone number" class="govuk-!-width-one-half" type="tel" autocomplete="tel"/>
    </template>
  </gv-radio>
</gv-radios>

Smaller radios

Set the size prop to small to use smaller radios.

Filter
<gv-radios size="small" legend="Filter" legend-class="govuk-fieldset__legend--m">
  <gv-radio value="monthly">Monthly</gv-radio>
  <gv-radio value="yearly">Yearly</gv-radio>
</gv-radios>

Error messages

Set the error-message prop to display an error.

Where do you live?

Error:Select the country where you live

<gv-radios
  legend="Where do you live?" 
  :legend-is-page-heading="true" 
  legend-class="govuk-fieldset__legend--l"
  error-message="Select the country where you live"
>
  <gv-radio value="england">England</gv-radio>
  <gv-radio value="scotland">Scotland</gv-radio>
  <gv-radio value="wales">Wales</gv-radio>
  <gv-radio value="northern-ireland">Northern Ireland</gv-radio>
</gv-radios>

GvRadios

Props

NameTypeDescription
modelValue string|number|boolean|object
The selected radio's value. In most cases you should use v-model instead of setting this prop directly.
name string
The value of the name attribute for all radios in this group. If you don't provide a name, one will be generated automatically.
direction string
Whether to show the radios on top of each other (stacked) or side-by-side (inline)

Allowed values: stacked, inline. Defaults to 'stacked'.
size string
The size of the radios in this group.

Allowed values: normal, small. Defaults to 'normal'.
fieldsetDescribedBy string
One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
fieldsetClass string|array|object
Classes to add to the fieldset container. You can bind a string, an array or an object, as with normal Vue class bindings.
fieldsetRole string
Optional ARIA role attribute to add to the fieldset container.
legend string
Text to use within the legend. If content is provided in the legend slot, this prop will be ignored.
legendClass string|array|object
Classes to add to the legend. You can bind a string, an array or an object, as with normal Vue class bindings.
legendIsPageHeading boolean
Whether the legend also acts as the heading for the page.
hint string
Text to use within the hint. If content is provided in the hint slot, this prop will be ignored.
hintClass string|array|object
Classes to add to the hint span tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessage string
Text to use within the error message. If content is provided in the error-message slot, this prop will be ignored.
errorMessageClass string|array|object
Classes to add to the error message <p> tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessageVisuallyHiddenText string
A visually hidden prefix used before the error message. Defaults to 'Error'.
formGroupClass string|array|object
Classes to add to the form group. You can bind a string, an array or an object, as with normal Vue class bindings.

Slots

NameDescription
legend
The content of the legend. If content is provided in this slot, the legend prop will be ignored.
hint
The content of the hint. If content is provided in this slot, the hint prop will be ignored.
error-message
The content of the error message. If content is provided in this slot, the errorMessage prop will be ignored.
default
A list of gv-radios

GvRadio

Props

NameTypeDescription
id string
The ID for this radio. If you don't provide an ID, one will be generated automatically.
value requiredstring|number|boolean|object
The value of this radio. The parent gv-radios' v-model will be set to this value if the radio is selected.
divider string
The divider text to show above the radio. This should usually be 'or'.
disabled boolean
If true, radio will be disabled.
label string
Text to use within the label. If content is provided in the default slot, this prop will be ignored.
labelClass string|array|object
Classes to add to the label tag. You can bind a string, an array or an object, as with normal Vue class bindings.
hint string
Text to use within the hint. If content is provided in the hint slot, this prop will be ignored.
hintClass string|array|object
Classes to add to the hint span tag. You can bind a string, an array or an object, as with normal Vue class bindings.

Slots

NameDescription
default
The content of the label. If content is provided in this slot, the label prop will be ignored.
hint
The content of the hint. If content is provided in this slot, the hint prop will be ignored.
conditional
Content to show if the checkbox is checked.