Components

Tabs

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.

<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>
  <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>
  </gv-tab>
</gv-tabs>

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)
</script>

<template>
  <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>
    <gv-tab v-if="showDynamicTab" label="Dynamic tab" key="dynamic-tab">
      <gv-inset-text>This is a dynamic tab</gv-inset-text>
    </gv-tab>
    <gv-tab label="Static tab 2" key="static-tab-2">
      <gv-inset-text>This is static tab 2</gv-inset-text>
    </gv-tab>
  </gv-tabs>
  
  <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>
  </gv-radios>
</template>

GvTabs

Props

Name	Type	Description
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.

Slots

Name	Description
default	A list of gv-tabs

GvTab

Props

Name	Type	Description
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.

Slots

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.