Components
Reusable parts of the user interface, with live examples, code and practical guidance.
Browse reusable parts of the interface. Every page includes a live HTML example, with React code when a wrapper exists in @govtech-bb/react.
Search by component name, purpose or group.
Showing all 32 components.
No components match this search. Check the spelling or try a shorter term.
Actions
Form elements
Add another
Lets users repeat a small group of fields, adding and removing entries on the page.
Checkbox
Checkboxes let users select any number of options from a list, including none.
Combobox
Lets users type to filter a long list and choose one option.
Date input
Lets users enter a memorable date, such as a date of birth.
Fieldset
Groups related form controls with a shared, accessible legend.
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.
Skip link
Lets keyboard users bypass repeated navigation and reach the main content.
Page furniture
Footer
The dark blue band at the end of every page.
Header
The white band at the top of every page, holding the gov.bb logo and primary navigation.
Official banner
A thin dark blue bar confirming this is a genuine government website.
Service heading
Opens a form page: the service it belongs to, the question, and why you are asking.
Content
Accordion
Sections of related content, each collapsed behind its heading.
List
Lists group related items, plain by default or with bullets or numbers.
Show/hide
Reveal secondary content, such as help text, on demand.
Summary list
Summary lists show information as key/value pairs, one row per pair.
Table
Tables let users compare information in rows and columns.
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.