Components
Reusable parts of the user interface, with live examples and code.
Components are reusable parts of the user interface. Each component page shows a live preview and the code you can copy.
More components are being migrated into the system. Each example shows its HTML, and a React version where a wrapper exists in @govtech-bb/react.
Actions
Form elements
Checkbox
Checkboxes let users select any number of options from a list, including none.
Date Input
Lets users enter a memorable date, such as a date of birth.
File Upload
Lets users attach a file, such as a supporting document.
Form group
Wraps a form control with its label, hint text and error message.
Input
Lets users enter a single line of short, free-form text.
Label
Names the field it sits above. Every form control needs one.
Number Input
Lets users enter a number, with buttons to step the value up or down.
Radio
Radio buttons let users pick exactly one option from a short list.
Select
Lets users choose one option from a long, familiar list.
Navigation
Back button
A link that takes users back to the previous page.
Breadcrumbs
A trail of links showing where the current page sits in the site hierarchy.
Link
Lets users navigate to another page or place on a page.
Search
Lets users find pages and services by entering a search term.
Service list
A list of bold green links to services, with optional descriptions and tags.
Page furniture
Content
Feedback
Error Summary
Lists every problem on a page and links straight to the field that caused it.
Feedback
A gold-bordered box asking users whether the page was helpful.
Payment
Walks users through paying a fee, and reports whether it worked.
Status banner
A coloured strip stating where a page sits in its lifecycle.