Design System React components

Last updated
27/06/2025

Accordion

Healthcare for veterans

Veterans are entitled to the same healthcare as any citizen. And there are health care options and support available specifically for veterans.

If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need.

Employability for veterans

If you're looking for a job, there are several organisations that can help you find a job or develop new skills.

Housing for veterans

If you need help finding a place to live there's support specifically for veterans.

JSX for this example
<Accordion id="accordion-example">
  <AccordionItem
    id="accordion-1"
    title="Healthcare for veterans"
  >
    <p>
      Veterans are entitled to the same healthcare as any citizen. And there are health care options and support available specifically for veterans.
    </p>
    <p>
      If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need.
    </p>
  </AccordionItem>
  <AccordionItem
    id="accordion-2"
    open
    title="Employability for veterans"
  >
    <p>
      If you're looking for a job, there are several organisations that can help you{' '}
      <a href="#accordion-link">
        find a job or develop new skills
      </a>
      .
    </p>
  </AccordionItem>
  <AccordionItem
    id="accordion-3"
    title="Housing for veterans"
  >
    <p>
      If you need{' '}
      <a href="#accordion-link">
        help finding a place to live
      </a>
      {' '}there's support specifically for veterans.
    </p>
  </AccordionItem>
</Accordion>
Accordion configuration

Accordion components can use the following props:

className (optional)
A CSS class name to pass to the component.
headerLevel
Header level to use for the accordion items' titles. Default is H3.
hideOpenAll (optional)
Do not show the "open all" button. Boolean.
Accordion item configuration

Accordion components' AccordionItem children can use the following props:

className (optional)
A CSS class name to pass to the component.
headerLevel (optional)
Header level to use for the accordion item's title. It is better to let the parent set this for all of its accordion items.
id
ID to use for the accordion item if you want to override the automatically generated default for any reason.
open (optional)
Makes the accordion item display in an open state on page load.

Aspect box

JSX for this example
<AspectBox>
  <img
    alt=""
    src="./highland-cow.jpg"
  />
</AspectBox>
JSX for this example
<AspectBox ratio="1:1">
  <img
    alt=""
    src="./highland-cow.jpg"
  />
</AspectBox>
Aspect box configuration

Aspect box components can use the following props:

className (optional)
A CSS class name to pass to the component.
ratio (optional)
Aspect ratio to use. Supported values are:
  • 1:1 (square)
  • 4:3 (standard fullscreen)
  • 16:9 (standard widescreen) (default)
  • 21:9 (anamorphic widescreen)

Back to top

This component uses absolute or sticky positioning and is not displayed in this box.

JSX for this example
<BackToTop />
Back to top configuration

Back to top components can use the following prop:

className (optional)
A CSS class name to pass to the component.
href (optional)
Fragment identifier for the target element. Default is #page-top.

Breadcrumbs

JSX for this example
<Breadcrumbs
  hideLastItem
  items={[
    {
      href: 'home',
      title: 'Home'
    },
    {
      href: 'category',
      title: 'Category'
    },
    {
      title: 'Page'
    }
  ]}
/>
Breadcrumbs configuration

Breadcrumbs components can use the following props:

className (optional)
A CSS class name to pass to the component.
hideLastItem (optional)
Will set the final breadcrumb (i.e. the current page) to visually hidden if present. Boolean.
items
Array of breadcrumb item data.
Breadcrumb items configuration

Objects in the bredcrumb items array can have the following properties:

href
URL to use for the breadcrumb item. Omit the href prop from the last breadcrumb item (representing the current page) to make it display without a link. This is the preferred way of presenting breadcrumbs in the Design System.
title
Text to use for a breadcrumb item.

Button

Button styles



JSX for this example
<div>
  <Button>
    Primary button
  </Button>
  <br />
  <Button buttonStyle="secondary">
    Secondary button
  </Button>
  <br />
  <Button disabled>
    Disabled button
  </Button>
</div>

Button sizes




JSX for this example
<div>
  <Button>
    Fluid-width button
  </Button>
  <br />
  <Button width="fixed">
    Fixed-width button
  </Button>
  <br />
  <Button width="max">
    Max-width button
  </Button>
  <br />
  <Button small>
    Small button
  </Button>
</div>

Buttons with icons



JSX for this example
<div>
  <Button icon="ChevronRight">
    Button with icon
  </Button>
  <br />
  <Button
    icon="ChevronLeft"
    iconLeft
  >
    Button with left icon
  </Button>
  <br />
  <Button
    icon="Search"
    iconOnly
  >
    Search
  </Button>
</div>

Link buttons and button links

Link styled as button
JSX for this example
<div>
  <Button href="#bananas">
    Link styled as button
  </Button>
  <br />
  <Button styleAsLink>
    Button styled as link
  </Button>
</div>
Button configuration

Button components can use the following props:

buttonStyle (optional)
The button style to use. Options are:
  • primary (default)
  • secondary
className (optional)
A CSS class name to pass to the component.
icon (optional)
Name of the icon to use from the icon stack.
iconLeft (optional)
Whether a button's icon is aligned to the left (default is aligned to the right). Boolean.
iconOnly (optional)
Whether this is an ‘icon only’ button. This will make the button's text (its child) be visually hidden but available to screen readers. Boolean, default is false.
href (optional)
href attribute to use on the button. If a href is specified, the button will use the HTML a element.
small (optional)
Whether to use the ‘small’ variant of a button. Boolean.
styleAsLink (optional)
Whether to make the button look like a link. Boolean.
type (optional)
The value for the type attribute of the button. Default is button but sometimes submit might be more appropriate.
width (optional)
The button width to use. Options are:
  • fluid (default)
  • fixed
  • max

Checkbox

or

JSX for this example
<CheckboxGroup
  items={[
    {
      checked: true,
      id: 'universal-credit',
      label: 'Universal Credit'
    },
    {
      id: 'pensioncredit',
      label: 'Pension Credit'
    },
    {
      id: 'jsa',
      label: 'Income-based Job Seeker\'s Allowance'
    },
    {
      exclusive: true,
      id: 'none',
      label: 'No, I do not receive any of these benefits'
    }
  ]}
 />
Checkbox group configuration

Use a CheckboxGroup component to group checkboxes. Checkbox group components can use the following props:

className (optional)
A CSS class name to pass to the component.
items
Array of checkbox items.
small (optional)
Whether to use the ‘small’ checkbox variant. Boolean.
Checkbox items configuration

Objects in the checkbox items array can have the following properties:

checked (optional)
Whether the checkbox should be checked on load.
hintText (optional)
Text to use for a checkbox's hint text.
id
Value to use for the checkbox's id attribute.
exclusive (optional)
Whether this checkbox is an an exclusive checkbox (a ‘none’ option). Boolean.
label
Text to use for the checkbox's associated label.
name (optional)
Value to use for the checkbox's name attribute. Will fall back to using the id prop if not provided.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
small (optional)
Whether to use the ‘small’ checkbox variant. Boolean. It is better to set this on the CheckboxGroup component.

Confirmation message

Landlord added successfully

You have added the landlord John Smith to the application.

JSX for this example
<ConfirmationMessage title="Landlord added successfully">
  <p>
    You have added the landlord{' '}
    <strong>
      John Smith
    </strong>
    {' '}to the application.
  </p>
</ConfirmationMessage>
Confirmation message configuration

Confirmation message components can use the following prop:

ariaLive (optional)
Value for an aria-live attribute on the confirmation message, for cases where it's added to the page dynamically. Default is polite.
className (optional)
A CSS class name to pass to the component.
headerLevel (optional)
The header level for the confirmation message's title. The default is H3. Changing the heading level does not alter the confirmation message's appearance.

Contents nav

JSX for this example
<ContentsNav
  items={[
    {
      current: '[Circular]',
      title: 'Apply for Blue Badge'
    },
    {
      href: '#2',
      title: 'Eligibility'
    },
    {
      href: '#3',
      title: 'Using your Blue Badge'
    },
    {
      href: '#4',
      title: 'Report a lost, stolen or misuesd Blue Badge'
    },
    {
      href: '#5',
      title: 'Changing or handing back a Blue Badge'
    }
  ]}
  label="Pages in this guide"
/>
Contents navigation configuration

Contents nav components can use the following props:

className (optional)
A CSS class name to pass to the component.
items
Array of content nav items.
label (optional)
Text to use for the content nav's aria-label property, which is required for accessibility. Default is ‘Pages in this section’.
title (optional)
The title for the contents nav. Default is ‘Contents’.
Contents nav items configuration

Objects in the contents nav items array can use the following propserties:

current (optional)
Whether the nav item is for the current page. Boolean.
href (optional)
URL of the contents nav item
title
Text of the content nav item

Date picker

JSX for this example
<DatePicker
  id="date-picker"
  label="Date of birth"
  value="12/08/2024"
/>

Date picker with date restrictions

Use dd/mm/yyyy format. For example, 31/01/2023.

JSX for this example
<DatePicker
  disabledDates="06/07/2024 07/07/2024 13/07/2024 14/07/2024 20/07/2024 21/07/2024 27/07/2024 28/07/2024"
  hintText="Use dd/mm/yyyy format. For example, 31/01/2023."
  id="date-picker-restrictions"
  label="Date of birth"
  maxDate="26/07/2024"
/>

Date picker with separate fields

Date of birth
JSX for this example
<DatePicker
  id="date-picker-separate"
  label="Date of birth"
  multiple
  value="12/08/2024"
/>
Date picker configuration

Date picker components can use the following props:

className (optional)
A CSS class name to pass to the component.
disabledDates (optional)
Space-separated list of dates to disable in the date picker. Uses the format dd/mm/yyyy.
error (optional)
Whether the date picker is in an error state. Boolean.
errorMessage (optional)
Text to use for an error message.
hintText (optional)
Text to use for a date picker hint text.
id
Value to use for the id attribute of the date picker's input element. If the date picker is using multiple inputs, each field starts with the ID. For example, myId-day, myId-month, myId-year.
iconPath (optional)
Path to the icon file.
label
Text to use for the date picker's associated label.
maxDate (optional)
Latest selectable date in the date picker. Uses the format dd/mm/yyyy.
minDate (optional)
Earliest selectable date in the date picker. Uses the format dd/mm/yyyy.
multiple (optional)
Whether to display the day, month and year as separate fields. Boolean.
name (optional)
Value to use for the name attribute of the date picker. The behaviour of this on date pickers with multiple input fields is the same as the behaviour of the id prop.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
value (optional)
The default value of the date picker.
width (optional)
The width of the input element. See TextInput for the available options. Default is fixed-10.

Details

I can't sign in

Contact the design system team if you cannot sign in.

Email designsystem@gov.scot.

Or phone 0000 123 4567
Monday to Friday, 9am to 5pm

JSX for this example
<Details summary="I can't sign in">
  <p>
    Contact the design system team if you cannot sign in.
  </p>
  <p>
    Email{' '}
    <a href="mailto:designsystem@gov.scot">
      designsystem@gov.scot
    </a>
    .
  </p>
  <p>
    Or phone 0000 123 4567
    <br />
    Monday to Friday, 9am to 5pm
  </p>
</Details>
Details configuration

Details components can use the following prop:

className (optional)
A CSS class name to pass to the component.
summary
Text to use for the details componen's ‘summary’ element.

Hide this page

This component uses absolute or sticky positioning and is not displayed in this box.

JSX for this example
<HideThisPage />
Hide this page configuration

Hide this lage can have use the following props:

className (optional)
A CSS class name to pass to the component.
escapeUrl (optional)
The URL to take the user to. Defaults to https://www.bbc.co.uk/weather.

Inset text

You may be able to apply for free school meals at the same time as you apply for the clothing grant.
JSX for this example
<InsetText>
  You may be able to{' '}
  <a href="#inset">
    apply for free school meals
  </a>
  {' '}at the same time as you apply for the clothing grant.
</InsetText>
Inset text configuration

Inset text can have use the following prop:

className (optional)
A CSS class name to pass to the component.

Notification banner

We need to tell you about something

JSX for this example
<NotificationBanner>
  <p>
    We need to tell you about{' '}
    <a href="#notification">
      something
    </a>
  </p>
</NotificationBanner>

Notification banner with icon and close

We need to tell you about something

JSX for this example
<NotificationBanner
  close
  icon
  iconColour
  iconInverse
>
  <p>
    We need to tell you about{' '}
    <a href="#notification">
      something
    </a>
  </p>
</NotificationBanner>
Notification banner configuration

Notification banner components can use the following props:

className (optional)
A CSS class name to pass to the component.
close (optional)
Shows the ‘close’ button on the notification banner. Boolean.
icon (optional)
Shows the ‘high priority’ icon on the notification banner. Boolean.
iconColour (optional)
Makes the icon display in the alternative colour scheme (yellow). Boolean.
iconInverse (optional)
Makes the icon be inverted against a circle background. Boolean.
title (optional)
A hidden title for the notification banner, useful for screen reader users. Default is ‘Information’.

Both iconColour and iconInverse can be used together. This combines the effects of both modifiers.

Notification panel

Thank you

Your Saltire Scholarship Application form has been successfully submitted.

JSX for this example
<NotificationPanel title="Thank you">
  <p>
    Your Saltire Scholarship Application form has been successfully submitted.
  </p>
</NotificationPanel>
Notification panel configuration

Notification panel components can use the following prop:

ariaLive (optional)
Value for an aria-live attribute on the notification panel, for cases where it's added to the page dynamically. Default is polite.
className (optional)
A CSS class name to pass to the component.
headerLevel (optional)
The header level for the notification panel's message's title. The default is H1. Changing the heading level does not alter the notification panel's appearance.
title
Title of the notification panel.

Page header

Guide

Apply for or renew a disabled parking permit

JSX for this example
<PageHeader
  label="Guide"
  title="Apply for or renew a disabled parking permit"
/>
Publication - FOI/EIR release

Constitutional Futures Division documents mentioning the Treaty on the Prohibition of Nuclear Weapons: FOI Release

Last updated
15 August 2024
Directorate
Constitution Directorate
Part of
Constitution and democracy, Public sector
FOI reference
FOI/202400423236
Date received
18 July 2024
Date responded
15 August 2024
JSX for this example
<PageHeader
  label="Publication - FOI/EIR release"
  title="Constitutional Futures Division documents mentioning the Treaty on the Prohibition of Nuclear Weapons: FOI Release"
>
  <Metadata>
    <MetadataItem name="Last updated">
      15 August 2024
    </MetadataItem>
    <MetadataItem name="Directorate">
      <a href="#one">
        Constitution Directorate
      </a>
    </MetadataItem>
    <MetadataItem name="Part of">
      <a href="#two">
        Constitution and democracy
      </a>
      ,{' '}
      <a href="#three">
        Public sector
      </a>
    </MetadataItem>
    <MetadataItem name="FOI reference">
      FOI/202400423236
    </MetadataItem>
    <MetadataItem name="Date received">
      18 July 2024
    </MetadataItem>
    <MetadataItem name="Date responded">
      15 August 2024
    </MetadataItem>
  </Metadata>
</PageHeader>
Page header configuration

Page header components can use the following props:

className (optional)
A CSS class name to pass to the component.
label (optional)
Text to use for a label shown above the H1 element. No label is displayed if there is no label prop provided.
title
Text to use for the page header's H1 element.

Page header components can show metadata below the H1 element. Do this by including a page metadata component as a child.

Page metadata

Last updated
21/04/2020
Directorate
Equality, Inclusion and Human Rights Directorate
Part of
Equality and rights, Law and order
JSX for this example
<Metadata>
  <MetadataItem name="Last updated">
    21/04/2020
  </MetadataItem>
  <MetadataItem name="Directorate">
    <a href="#one">
      Equality, Inclusion and Human Rights Directorate
    </a>
  </MetadataItem>
  <MetadataItem name="Part of">
    <a href="#two">
      Equality and rights
    </a>
    ,{' '}
    <a href="#three">
      Law and order
    </a>
  </MetadataItem>
</Metadata>

Inline metadata

Content type
Publication
Last updated
21/04/2020
JSX for this example
<Metadata inline>
  <MetadataItem name="Content type">
    Publication
  </MetadataItem>
  <MetadataItem name="Last updated">
    21/04/2020
  </MetadataItem>
</Metadata>
Page metadata configuration

Page metadata components can use the following prop:

className (optional)
A CSS class name to pass to the component.
inline (optional)
Makes the page metadata use the truncated ‘inline’ display. Boolean.
Medatata item configuration

Page metadata components can have any number of MetadataItem children. Metadata item components can use the following props:

name
The name or key of the metadata item. Boolean.

The value of the metadata item is provided by its children.

Pagination

JSX for this example
<Pagination
  page="1"
  totalPages="21"
/>
JSX for this example
<Pagination
  page="10"
  totalPages="21"
/>
JSX for this example
<Pagination
  padding="3"
  page="10"
  totalPages="21"
/>
Pagination configuration

Pagination components can use the following props:

ariaLabel (optional)
Text to use for an aria-label attribute on the nav element. Default is ‘Pages’.
className (optional)
A CSS class name to pass to the component.
onClick (optional)
Function to fire in response to a click event on paginaiton links.
padding (optional)
Number of other pages to show on either side of the current page. Default is 1.
page
Current page number.
pattern (optional)
A regex-ish pattern to use for the pagination links. The string $1 will be replaced with the page number.
Default is /search?page=$1.
totalPages
Total number of pages.

Phase banner

bananaThis is a new service. Your feedback will help us to improve it.

JSX for this example
<PhaseBanner phaseName="banana">
  This is a new service. Your{' '}
  <a href="#feedback">
    feedback
  </a>
  {' '}will help us to improve it.
</PhaseBanner>
Phase banner configuration

Phase banner components can use the following prop:

className (optional)
A CSS class name to pass to the component.
phaseName
The text for the phase banner's tag component.

Question

Basic question

JSX for this example
<Question>
  <TextInput
    id="text-input-question"
    label="First name"
  />
</Question>

Question with error

This is a required field

JSX for this example
<Question error>
  <TextInput
    error="true"
    errorMessage="This is a required field"
    id="text-input-question-error"
    label="First name"
  />
</Question>

Fieldset question

Do you receive any of these benefits

Select all that apply.

or

JSX for this example
<Question
  hintText="Select all that apply."
  legend="Do you receive any of these benefits"
  tagName="fieldset"
>
  <CheckboxGroup
    items={[
      {
        id: 'universalcredit-question',
        label: 'Universal Credit'
      },
      {
        id: 'pensioncredit-question',
        label: 'Pension Credit'
      },
      {
        id: 'jsa-question',
        label: 'Income-based Job Seeker\'s Allowance'
      },
      {
        exclusive: true,
        id: 'noneCheckbox-question',
        label: 'No, I do not receive any of these benefits'
      }
    ]}
   />
</Question>

Fieldset question with error

Do you receive any of these benefits

Select all that apply.

You must select at least one option

or

JSX for this example
<Question
  error="true"
  errorMessage="You must select at least one option"
  hintText="Select all that apply."
  legend="Do you receive any of these benefits"
  tagName="fieldset"
>
  <CheckboxGroup
    items={[
      {
        id: 'universalcredit-question-error',
        label: 'Universal Credit'
      },
      {
        id: 'pensioncredit-question-error',
        label: 'Pension Credit'
      },
      {
        id: 'jsa-question-error',
        label: 'Income-based Job Seeker\'s Allowance'
      },
      {
        exclusive: true,
        id: 'noneCheckbox-question-error',
        label: 'No, I do not receive any of these benefits'
      }
    ]}
   />
</Question>
Question configuration

Question components can use the following props:

className (optional)
A CSS class name to pass to the component.
error (optional)
Whether the question is in an error state. Boolean.
errorMessage (optional)
Text for a question's ErrorMessage component. For use when the question uses a fieldset.
hintText (optional)
Text for a question's HintText component. For use when the question uses a fieldset.
legend (optional)
Text for a question's legend element. Use when the question has a tagName of ‘fieldset’.
tagName (optional)
HTML tag name to use for the question. Default is div, but fieldset will sometimes be more appropriate.

Questions are meaningless without one or more form fields, which should be provided as children.

Radio button

JSX for this example
<RadioGroup
  items={[
    {
      id: 'flat-radio',
      label: 'Flat'
    },
    {
      id: 'bungalow-radio',
      label: 'Bungalow'
    },
    {
      id: 'cottage-radio',
      label: 'Cottage'
    },
    {
      id: 'terraced-radio',
      label: 'Terraced house'
    },
    {
      id: 'semi-radio',
      label: 'Semi-detached house'
    },
    {
      id: 'detached-radio',
      label: 'Detached house'
    }
  ]}
  name="propertyType"
/>

Radio buttons with hint text

This means you're paid for the period coming up, e.g. the month ahead

This means you're paid for the time that's just passed, e.g. for the last month

JSX for this example
<RadioGroup
  items={[
    {
      hintText: 'This means you\'re paid for the period coming up, e.g. the month ahead',
      id: 'advance-radio',
      label: 'Advance'
    },
    {
      hintText: 'This means you\'re paid for the time that\'s just passed, e.g. for the last month',
      id: 'arrears-radio',
      label: 'Arrears'
    }
  ]}
  name="paymentType"
/>
Radio group configuration

Use a RadioGroup component to group radio buttons. Radio groups can use the following props:

className (optional)
A CSS class name to pass to the component.
inline (optional)
Whether to display the radio buttons in the group inline instead of stacked. Boolean.
items
Array of radio button items.
name
Value for the name attribute on radio buttons in the group.
small (optional)
Whether to use the ‘small’ checkbox variant. Boolean.
Radio group items configuration

Objects in the radio group's items array can use the following propserties:

checked (optional)
Whether the radio should be selected on load.
hintText (optional)
Text to use for a radio button's hint text.
id
Value to use for the radio button's id attribute.
label
Text to use for the radio button's associated label.
name (optional)
Value to use for the radio button's name attribute. It is better to set a name on a parent RadioGroup element instead.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
small (optional)
Whether to use the ‘small’ radio button variant. Boolean. It is better to set this on the RadioGroup component.

Select (dropdown)

JSX for this example
<Select
  defaultValue="button"
  id="select-component"
  label="Choose a component"
  options={[
    {
      text: 'Accordion',
      value: 'accordion'
    },
    {
      text: 'Breadcrumbs',
      value: 'breadcrumbs'
    },
    {
      text: 'Button',
      value: 'button'
    }
  ]}
  placeholder="Choose a component"
/>
Select configuration

Select components can use the following props:

className (optional)
A CSS class name to pass to the component.
defaultValue (optional)
The ID of the option that you want selected on page load.
error (optional)
Whether the field is in an error state. Boolean.
errorMessage (optional)
Text to use for an error message.
hintText (optional)
Text to use for a select's hint text.
id
Value to use for the select's id attribute.
label
Text to use for the select's associated label.
name (optional)
Value to use for the select's name attribute. Will fall back to using the id prop if not provided.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
options
Array of option items.
placeholder (optional)
Text to use for an optional unselected first option.
width (optional)
The width to use for the select element. The options are the same as for TextInput.
Select 'option' items configuration

Objects in the ‘options’ array can use the following properties:

text
The text of the option element.
value (optional)
The value attribute of the option element.

Sequential navigation

JSX for this example
<SequentialNavigation
  next={{
    href: '#next',
    title: 'Eligibility: who can have one?'
  }}
  previous={{
    href: '#prev',
    title: 'Apply for or renew a Blue Badge?'
  }}
/>
Sequential navigation configuration

Sequential navigation uses the following props:

ariaLabel (optional)
Text to use for an aria-label attribute on the nav element. Default is ‘Article navigation’.
className (optional)
A CSS class name to pass to the component.
next (optional)
Object containing data for the ‘next’ link.
previous (optional)
Object containing data for the ‘previous’ link.
Sequential navigation 'next' and 'previous' configuration

The values for ‘next’ and ‘previous’ are both object with the following properties:

href
The destination URL.
title
Text to use for the link text.

Side navigation

JSX for this example
<SideNavigation
  items={[
    {
      href: '#apples',
      items: [
        {
          href: '#green-apples',
          items: [
            {
              current: '[Circular]',
              title: 'Bramley'
            },
            {
              href: '#granny-smith',
              title: 'Granny Smith'
            }
          ],
          title: 'Green apples'
        },
        {
          href: '#red-apples',
          title: 'Red apples'
        }
      ],
      title: 'apples'
    },
    {
      href: '#bananas',
      title: 'Bananas'
    },
    {
      href: '#cherries',
      title: 'Cherries'
    },
    {
      href: '#dates',
      title: 'Dates'
    }
  ]}
 />
Side navigation configuration

Side navigation components can use the following prop:

className (optional)
A CSS class name to pass to the component.
items
Array of side navigation item objects.
Side navigation items configuration

Objects in the side navigation ‘items’ array can use the following properties:

current (optional)
Whether this is the current page. The current page uses a span element and is not a link. Boolean. Default is false.
href
The destination URL.
items (optional)
Array of side navigation item objects, for a nested navigation structure.
title
Text to use for the link text.

Site navigation

JSX for this example
<SiteNavigation
  items={[
    {
      href: '#about',
      title: 'About'
    },
    {
      href: '#get-started',
      title: 'Get started'
    },
    {
      href: '#styles',
      title: 'Styles'
    },
    {
      current: '[Circular]',
      href: '#components',
      title: 'Components'
    },
    {
      href: '#patterns',
      title: 'Patterns'
    },
    {
      href: '#guidance',
      title: 'Guidance'
    }
  ]}
 />
Site navigation configuration

Site navigation components can use the following prop:

className (optional)
A CSS class name to pass to the component.
items
Array of site navigation item objects.
Site navigation items configuration

Objects in the site navigation ‘items’ array can use the following properties:

current (optional)
Whether this is the current page. Boolean. Default is false.
href
The destination URL.
title
Text to use for the link text.
JSX for this example
<SiteSearch
  autocompleteEndpoint="./autocomplete-dummy-data.json#"
  autocompleteSuggestionMappingFunction={function er(){}}
/>
Site search configuration

Site search can use the following props:

action (optional)
The value of the search form's action atttribute. Default is /search.
className (optional)
A CSS class name to pass to the component.
id
The value of the search input field's id attribute. Default is site-search
method (optional)
The form method to use. Default is GET.
name (optional)
The value of the search field's name attribute. Default is q.
placeholder (optional)
The value of the search field's placeholder attribute. Default is Search.
Autocomplete configuration

Autocomplete can be configured on a site search component by adding the following props:

autocompleteEndpoint
The endpoint used by the autocomplete.
autocompleteSuggestionMappingFunction (optional)
A JavaScript function that maps the results from the endpoint into the format that the Design System Autocomplete component expects.
minLength (optional)
The number of characters that need to be entered before requests are sent to the endpoint. Default is 3.

This component uses absolute or sticky positioning and is not displayed in this box.

JSX for this example
<SkipLinks
  items={[
    {
      targetId: 'foo',
      title: 'bar'
    }
  ]}
  mainContentId="baz"
/>
Skip links configuration

Skip links always contain a link to the main content of a page. You can include additional links in the items prop. Skip links components can use the following props:

items (optional)
Array of additional skip link items if you need to add more than just ‘main content’.
mainContentId (optional)
The id attribute of the ‘main content’ element to link to. Default is main-content.
mainLinkText (optional)
The text to use for the ‘main content’ link. Default is ‘Skip to main content’.
Skip link items configuration

Objects in the skip link items array use the following properties:

targetId
ID of the destination element.
title
Text to use for the link text.

Summary card

Joe Bloggs

  1. Phone number0123 456 7890
  2. AddressVictoria Quay
    Edinburgh
    EH6 6QQ
JSX for this example
<SummaryCard
  actions={[
    {
      href: '#foo',
      title: 'Change'
    },
    {
      onclick: function er(){},
      title: 'Delete'
    }
  ]}
  items={[
    {
      title: 'Phone number',
      value: '0123 456 7890'
    },
    {
      title: 'Address',
      value: 'Victoria Quay\nEdinburgh\nEH6 6QQ'
    }
  ]}
  title="Joe Bloggs"
/>
Summary card configuration

Summary card components can use the following props:

actions (optional)
Array of summary card actions data.
className (optional)
A CSS class name to pass to the component.
headerLevel (optional)
Header level to use for the summary card title. Default is H3.
items
Array of summary list item data.
title
The title of the summary card.

Summary list

  1. NameJane Smith
    Change
  2. Date of birth13 April 2001
    Change
  3. AddressScottish Government
    St Andrew's House
    Regent Road
    Edinburgh
    EH1 3DG
    Change
  4. Contact details
    • email@gov.scot
    • 0123 456 7890
JSX for this example
<SummaryList
  items={[
    {
      actions: [
        {
          href: '#foo',
          title: 'Change'
        },
        {
          onclick: function er(){},
          title: 'Delete'
        }
      ],
      title: 'Name',
      value: 'Jane Smith'
    },
    {
      actions: [
        {
          href: '#bar',
          title: 'Change'
        }
      ],
      title: 'Date of birth',
      value: '13 April 2001'
    },
    {
      actions: [
        {
          href: '#baz',
          title: 'Change'
        }
      ],
      title: 'Address',
      value: 'Scottish Government\nSt Andrew\'s House\nRegent Road\nEdinburgh\nEH1 3DG'
    },
    {
      title: 'Contact details',
      value: [
        'email@gov.scot',
        '0123 456 7890'
      ]
    }
  ]}
 />
Summary list configuration

Summary list components can use the following props:

className (optional)
A CSS class name to pass to the component.
items
Array of summary list item data.
noBorder (optional)
Use the borderless display variant. Boolean.

Tag

Beta
JSX for this example
<Tag title="Beta" />
Completed
JSX for this example
<Tag
  colour="green"
  title="Completed"
/>
Tag configuration

Tag components can use the following props:

className (optional)
A CSS class name to pass to the component.
colour (optional)
The tag colour to use. Supported values are:
  • grey
  • green
  • teal
  • blue (default)
  • purple
  • pink
  • red
  • orange
  • yellow
title
The text content of the tag.

Task list

Application incomplete

  • Conditions

    Tell us about your conditions, symptoms and any sensory issues you have.

  • Medications

    Tell us about any medication you need.

  • Contacts and supporting information

    Share any supporting documents and provide details of people we can talk to about you.

JSX for this example
<TaskList title="Application incomplete">
  <Task
    href="#conditions"
    id="task-conditions"
    isComplete
    statusText="Completed"
    title="Conditions"
  >
    Tell us about your conditions, symptoms and any sensory issues you have.
  </Task>
  <Task
    href="#in-progress"
    id="task-medications"
    statusText="In progress"
    title="Medications"
  >
    Tell us about any medication you need.
  </Task>
  <Task
    id="task-contacts"
    statusText="Cannot start yet"
    title="Contacts and supporting information"
  >
    Share any supporting documents and provide details of people we can talk to about you.
  </Task>
</TaskList>

Task list with grouped tasks

Application incomplete

JSX for this example
<TaskList title="Application incomplete">
  <TaskGroup title="Provide your health details">
    <Task
      href="#conditions"
      id="task-conditions"
      isComplete
      statusText="Completed"
      title="Conditions"
    >
      Tell us about your conditions, symptoms and any sensory issues you have.
    </Task>
    <Task
      href="#in-progress"
      id="task-medications"
      isComplete
      statusText="Completed"
      title="Medications"
    >
      Tell us about any medication you need.
    </Task>
    <Task
      href="#contacts"
      id="task-contacts"
      isComplete
      statusText="Completed"
      title="Contacts and supporting information"
    >
      Share any supporting documents and provide details of people we can talk to about you.
    </Task>
  </TaskGroup>
  <TaskGroup
    intro="This information will be used to check what additional benefits you may be able to apply for."
    title="Tell us about your daily living and mobility circumstances"
  >
    <Task
      href="#preparing-food"
      id="task-preparing-food"
      statusText="In progress"
      tagColour="grey"
      title="Preparing food"
    >
      Questions about your ability to prepare a simple meal safely and any help you need to do this.
    </Task>
    <Task
      href="#taking-nutrition"
      id="task-taking-nutrition"
      statusText="Not started"
      tagColour="grey"
      title="Taking nutrition"
    >
      Questions about your ability to eat and drink and any help you need to do this.
    </Task>
    <Task
      href="#managing-therapy"
      id="task-managing-therapy"
      statusText="Not started"
      tagColour="grey"
      title="Managing therapy or monitoring a health condition"
    >
      Questions about any help you need to monitor changes in your health condition, take medication or do therapy at home.
    </Task>
  </TaskGroup>
</TaskList>
Task list configuration

Task list components can have either Task or TaskGroup children. Task list components can use the following prop:

className (optional)
A CSS class name to pass to the component.
headingId (optional)
ID of the task list's heading element.
title
The title of the task list.
Task configuration

Task components can use the following props:

className (optional)
A CSS class name to pass to the component.
href (optional)
The URL of the page to link to.
id (optional)
The value of the task's id attribute.
isComplete (optional)
Whether the task is complete. Boolean.
statusText (optional)
The text to use for the task's status tag.
tagColour (optional)
The colour to use for the task's status tag. Default is grey.
title
The title of the task list.

Tasks can have additional content, provided as children of the task component.

Task group configuration

Task groups can use the following props:

className (optional)
A CSS class name to pass to the component.
intro (optional)
Text to put into an introduction paragraph above the group's tasks.
title
The title of the task group.

Text input

JSX for this example
<TextInput
  id="text-input"
  label="First name"
  type="password"
/>

Text input with hint text

This is your given name.

JSX for this example
<TextInput
  hintText="This is your given name."
  id="text-input-hint"
  label="First name"
/>

Text input with associated button

JSX for this example
<TextInput
  buttonIcon="Search"
  buttonText="Search"
  hasButton
  id="text-input-button"
  label="Search"
/>

Text input with character count

JSX for this example
<TextInput
  id="text-input-character-count"
  label="First name"
  maxlength="20"
  value="Joe Bloggs"
  width="fixed-20"
/>

Text input with currency

JSX for this example
<TextInput
  currency
  id="text-input-currency"
  label="Price per month"
  width="fluid-one-third"
/>
Text input configuration

Text input components can use the following props:

className (optional)
A CSS class name to pass to the component.
error (optional)
Whether the field is in an error state. Boolean.
errorMessage (optional)
Text to use for an error message.
hintText (optional)
Text to use for a text input's hint text.
id
Value to use for the id attribute of the input element.
label
Text to use for the text input's associated label.
name (optional)
Value to use for the name attribute of the input element.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
placeholder (optional)
Value to use for the placeholder attribute of the input element.
type
Value to use for the type attribute of the input element. Default is text.
value (optional)
The default value of the input element.
width (optional)

The width to use for the input element. If no width is specified the text input is full-width. Supported values are:

  • fixed-20 - 20 characters wide
  • fixed-10 - 10 characters wide
  • fixed-5 - 5 characters wide
  • fixed-4 - 4 characters wide
  • fixed-3 - 3 characters wide
  • fixed-2 - 2 characters wide
  • fluid-three-quarters - three quarters of the width of the parent container
  • fluid-two-thirds - two thirds of the width of the parent container
  • fluid-half - half of the width of the parent container
  • fluid-one-third - one third of the width of the parent container
  • fluid-one-quarter - one quarter of the width of the parent container
Text input with button configuration

Use these additional props for a text input with an associated button:

buttonIcon
Name of the icon to use from the icon stack.
buttonText
Text content for the button (for screen readers).
hasButton
Whether the component has an associated button. Boolean.
Character count configuration

Use these additional props for a text input with a character count:

countThreshold (optional)
Percentage threshold to show the character count at.
maxlength
Maximum number of characters permitted.
Currency input configuration

Use these additional props for a currency text input:

currency
Whether the component is a currency field. Boolean.
currencySymbol (optional)
Currency symbol to use. Default is £.

Textarea

JSX for this example
<Textarea
  id="textarea"
  label="Description"
  rows="2"
/>

Textarea with character count

JSX for this example
<Textarea
  defaultValue="Mygov.scot gives people and businesses information about and access to public services in Scotland. We work closely with public sector organisations to make public services easy to find and understand."
  id="textarea-character-count"
  label="Description"
  maxlength="250"
/>
Textarea configuration

Textarea components can use the following props:

className (optional)
A CSS class name to pass to the component.
error (optional)
Whether the field is in an error state. Boolean.
errorMessage (optional)
Text to use for an error message.
hintText (optional)
Text to use for a textarea's hint text.
id
Value to use for the id attribute of the textarea element.
label
Text to use for the textarea's associated label.
name (optional)
Value to use for the name attribute of the textarea element.
onBlur (optional)
Function to fire in response to a blur event.
onChange (optional)
Function to fire in response to a change event.
placeholder (optional)
Value to use for the placeholder attribute of the textarea element.
rows (optional)
Value to use for the rows attribute of the textarea element. Default is 4.
value (optional)
The default value of the textarea element.
Character count configuration

Use these additional props for a textarea with a character count:

countThreshold (optional)
Percentage threshold to show the character count at.
maxlength
Maximum number of characters permitted.

Warning text

Call 999 if you or someone else is in immediate danger, or if the crime is in progress.
JSX for this example
<WarningText>
  Call 999 if you or someone else is in immediate danger, or if the crime is in progress.
</WarningText>
Warning text configuration

Warning text can have use the following prop:

className (optional)
A CSS class name to pass to the component.
Back to top