Components

Form

A form that checks its fields on submit, lists problems in a linked summary and moves focus to it.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
No problems	No summary	—
Stopped submit	Summary on the danger background	`color-status-danger-background`, `color-status-danger-border`
Summary focused	2 px ring	`color-focus-ring`

Measurements

Property	Value	Token
Between fields	16 px	`space-xl`
Summary padding	12 px	`space-lg`
Summary corner radius	8 px	`radius-lg`

Tokens

Values are shown for the selected brand; switch brands from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-color-status-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-color-status-danger-border`		`#ffd6d4#ffd6d4#ffd6d4`	`#822b2e#822b2e#822b2e`
`--bigbang-color-text-danger`		`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-radius-lg`		`10px10px10px`	`10px10px10px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`
`--bigbang-space-xl`		`16px16px16px`	`16px16px16px`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Summary appears	Fades and moves 4 px (`motion.fieldMessage`)	`motion-list-enter-duration`	`easing-productive-enter`	It only fades.
Link click	The field scrolls smoothly to the centre	Browser	Browser	Scrolls instantly.