Components

Autocomplete

A text input that suggests values while the user types but accepts any text.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Default	Input border, raised surface and the field shadow	`color-border-input`, `color-surface-raised`, `input-shadow`
Focus	Focus border; a 2 px focus outline 2 px outside the box	`color-border-focus`, `color-focus-ring`
List open	The shared popup surface: a hairline edge and the popup shadow	`color-surface-raised`, `color-border-overlay`, `shadow-popup`
Highlighted suggestion	Selected surface fill, as on menu rows	`color-surface-selected`
Error	Danger border with a 2 px danger halo around it	`color-border-danger`, `color-status-danger-background`
Disabled	Disabled surface and text	`color-surface-disabled`, `color-text-disabled`

Measurements

Property	Value	Token
Height	32 / 36 / 40 px (`sm` / `md` / `lg`)	`input-height-sm`, `input-height-md`, `input-height-lg`
List maximum height	As in Combobox	`combobox-list-max-height`
Suggestion row	At least 32 px; 4 px block and 8 px inline padding; 6 px corners	`menu-item-height`, `menu-item-padding-block`, `menu-item-padding-inline`, `menu-item-radius`
List padding	4 px	`menu-inset`
Clear button	32 px; 24 px at size `sm`	`button-height-sm`, `button-height-xs`

Tokens

Token	Sample	Light mode	Dark mode
`--bigbang-color-border-input`		`#8c8c8c#8c8c8c#8c8c8c`	`#737373#737373#737373`
`--bigbang-color-surface-raised`		`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-input-shadow`		`0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)`	`0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)`
`--bigbang-color-border-focus`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-color-surface-selected`		`#edf5f8#ededed#ededed`	`#092932#404040#404040`
`--bigbang-color-border-overlay`		`#ededed#ededed#ededed`	`rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)`
`--bigbang-color-border-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-status-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-input-height-sm`		`32px32px32px`	`32px32px32px`
`--bigbang-input-height-md`		`36px36px36px`	`36px36px36px`
`--bigbang-input-height-lg`		`40px40px40px`	`40px40px40px`
`--bigbang-combobox-list-max-height`		`252px252px252px`	`252px252px252px`
`--bigbang-menu-item-height`		`32px32px32px`	`32px32px32px`
`--bigbang-menu-item-radius`		`6px6px6px`	`6px6px6px`
`--bigbang-menu-inset`		`4px4px4px`	`4px4px4px`
`--bigbang-shadow-popup`		`0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)`	`0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)`

Motion and interaction

The list grows from the field with motion.popover and closes faster. The highlighted suggestion fills at the motion.hover pace.