The tabs component lets users navigate between related sections of content, displaying one section at a time.

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

Cases opened

<gv-tabs title="Cases opened">
  <gv-tab label="Past day">
    <h2 class="govuk-heading-l">Past day</h2>
    <gv-inset-text>No cases opened in the past day</gv-inset-text>
  <gv-tab label="Past week">
    <h2 class="govuk-heading-l">Past week</h2>
    <gv-inset-text>No cases opened in the past week</gv-inset-text>

Adding and removing tabs

If you dynamically change which tabs are shown, you must set a key on each tab to ensure the content of each tab is shown in the correct order on smaller screens (where the tabs disappear and the content of every tab is shown at once).

If the currently selected tab is removed, the first tab in the list will become selected.

Show dynamic tab?
<script setup lang="ts">
import { ref } from 'vue'

const showDynamicTab = ref(false)

  <gv-tabs title="Example tabs">
    <gv-tab label="Static tab 1" key="static-tab-1">
      <gv-inset-text>This is static tab 1</gv-inset-text>
    <gv-tab v-if="showDynamicTab" label="Dynamic tab" key="dynamic-tab">
      <gv-inset-text>This is a dynamic tab</gv-inset-text>
    <gv-tab label="Static tab 2" key="static-tab-2">
      <gv-inset-text>This is static tab 2</gv-inset-text>
  <gv-radios v-model="showDynamicTab" legend="Show dynamic tab?" direction="inline" size="small">
    <gv-radio :value="true">Yes</gv-radio>
    <gv-radio :value="false">No</gv-radio>



title string
Title for the tabs table of contents. This will only be shown on smaller screens, where the tab list is displayed as a vertical list of links.


Name Description
default A list of gv-tabs



label string
The text label of the tab. If content is provided in the label slot, this prop will be ignored.
id string
The ID for this tab. If you don't provide an ID, one will be generated automatically.
selected boolean
Whether this tab should default to selected. If no tab in the tab group is set to :selected="true", the first tab in the group will be selected.

Defaults to false.


Name Description
label The text label of the tab. If content is provided in this slot, the label prop will be ignored.
default The content of the tab panel.