Skip to content

govuk-ui/govuk-ui-snippets

Repository files navigation

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.

Button

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.

GOVUK-UI Date Input

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.

GOVUK-UI Header

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

About

A collection of GOVUK-UI React component snippets for VSCode

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published