Components

Details

Make a page easier to scan by letting users reveal more detailed information only if they need it.

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

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

<gv-details summary="Help with nationality">
  <p class="govuk-body">
    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot 
    provide your nationality, you’ll have to send copies of identity documents through the post.
  </p>
</gv-details>

Providing the details content

You can either use the text prop or the default slot to provide content to show when this component is expanded. If you use the prop, the content will automatically be wrapped in a <p class="govuk-body">, which will apply the correct paragraph styling. If you use the slot, you'll need to wrap your paragraphs manually.

Using v-model with details

You can bind a boolean value with v-model:open to set and keep track of the open state of the details element.

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

Value of v-model:open: true

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

const isOpen = ref(true)
</script>

<template>
  <gv-details summary="Help with nationality" v-model:open="isOpen">
    <p class="govuk-body">
      We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot 
      provide your nationality, you’ll have to send copies of identity documents through the post.
    </p>
  </gv-details>
  <gv-inset-text aria-live="polite">
    <p class="govuk-body">Value of v-model:open: {{isOpen}}</p>
  </gv-inset-text>
</template>

Props

Name	Type	Description
summary	string	Text to use within the summary element (the visible part of the details element). If content is provided in the summary slot, this prop will be ignored.
text	string	Text to use within the disclosed part of the details element. If content is provided in the default slot, this prop will be ignored.
id	string	ID to add to the details element.
open	boolean	The open state of the details element. Use v-model:open to keep track of the open state.

Slots

Name	Description
summary	The content of the summary element (the visible part of the details element). If content is provided in this slot, the summary prop will be ignored.
default	The content of the disclosed part of the details element. If content is provided in this slot, the text prop will be ignored.