govuk-ui-snippets
A collection of React code snippets for the GOVUK-UI component library.
Requirements
You'll need to have the govuk-ui npm package installed for these code snippets to work properly, as they are wrappers for those React components.
Usage
There are snippets for each govuk-ui component, as listed below.
Back link
| Snippet shortcut |
Description |
| govbl |
Back link with empty href. |
Breadcrumbs
| Snippet shortcut |
Description |
| govbc |
Breadcrumbs with two BreadcrumbItems. |
| Snippet shortcut |
Description |
| govb |
Button. |
Character Count
| Snippet shortcut |
Description |
| govcc |
Character count with unset maxLength and label set as page heading. |
GOVUK-UI Checkboxes
| Snippet shortcut |
Description |
| govc |
Checkboxes with a Legend and three CheckboxItems. Each CheckboxItem has its own Label. |
| Snippet shortcut |
Description |
| govd |
A DateInput with a Legend and Hint. |
GOVUK-UI Error Summary
| Snippet shortcut |
Description |
| goves |
An ErrorSummary with an ErrorSummaryMessage. |
GOVUK-UI File Upload
| Snippet shortcut |
Description |
| govfu |
A FileUpload with a Label. |
Radios
| Snippet shortcut |
Description |
| govr |
Radios with two options and legend set as page heading. |
| Snippet shortcut |
Description |
| govh |
Header with a homepageUrl property. |
GOVUK-UI Inset Text
| Snippet shortcut |
Description |
| govit |
InsetText with customizable text. |
GOVUK-UI Phase Banner
| Snippet shortcut |
Description |
| govpb |
PhaseBanner with a phase property and customizable text. |
GOVUK-UI Select
| Snippet shortcut |
Description |
| govs |
Select with an id property and three SelectItem children with values and display text. |
GOVUK-UI Tabs
| Snippet shortcut |
Description |
| govtab |
Tabs with two TabItems, each with an id, a label, and customizable content. |
GOVUK-UI Text Input
| Snippet shortcut |
Description |
| govti |
Input with a name property and a Label with a class and isPageHeading properties. |
GOVUK-UI Textarea
| Snippet shortcut |
Description |
| govta |
Textarea with a name property and a Label with a class and isPageHeading properties. |
GOVUK-UI Typography
| Snippet shortcut |
Description |
| govt |
Typography with customizable text. |
| govth1 |
Typography with component set to "h1" and customizable text. |
GOVUK-UI Warning Text
| Snippet shortcut |
Description |
| govwt |
WarningText with iconFallbackText property and customizable text. |
Extension Settings
Release Notes
| |
