A box to type in that suggests matches from a list, for one choice or several: the input’s well, the dropdown panel under it, and each pick a chip.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
selectionsmbk-combobox--selection-<value> | singlemultiple | single | One choice, shown as text in the box, or several, each kept as a removable chip before the text, with a tick box on every option. Figma calls this "Mode". |
sizesmbk-combobox--size-<value> | mdsm | md | The input’s two heights, with the dropdown’s items at the same size when open. Small text never goes under 16 px on a phone. |
errorsmbk-combobox--error | On or off | Off | The value is invalid. Draws the danger border, kept while focused, and the error icon before the caret. |
Examples
Usage
Type a few letters and the list shows the cities that match. Down and Up move through it, Enter picks, Escape closes it.
Several picks
Each pick is a chip before the text; its cross removes it, and so does Backspace in an empty box.
Open
The list under the box shows what matches the letters typed; the chosen city carries a tick.
Several picks, open
Each option has a tick box, and picking one keeps the list open for the next.
Loading
While the page fetches matches, the list says so in words beside the turning ring.
No results
When nothing matches, the list says so instead of showing an empty panel.
Guidelines
Purpose
A box to type in that suggests matches from a list, for one choice or several: a city, a person, a tag. Typing narrows the list under the box, and the reader picks from it with the keys or a press. It differs from the select, which opens a fixed list to choose from without typing, and from the search field, which takes free text and suggests nothing.
When to use
- A long list the reader searches by name: a country among two hundred, a person in a team, a city.
- A list a page fetches as the reader types, such as a search on a server.
- Several picks from a long list, each kept visible as a chip: the tags on a post, the cities on a trip.
When not to use
- A handful of choices. Use a select, or radios when they should all be visible.
- Free text with no list to choose from. Use an input, or a search field for a search.
- Going somewhere rather than choosing a value, such as a site search that opens a page. Use a search field and a page of results, or the command palette.
- Several choices from a short list. Use checkboxes.
Usage rules
Do
- Put it in a field, with a label that stays in view while the reader types.
- Say what to type in the placeholder or the help text, such as "Type a few letters".
- Write the error row's words as what went wrong and what to do.
- Group a long list under short headings the reader expects, such as a color's family.
- Keep the words after a label short: a contrast ratio, an address, a count.
Don't
- Use a combobox for a few choices. Use a select or radios.
- Use it for navigation. Use a search field or the command palette.
- Show options that do not match what was typed.
- Give every option a badge when only a few need one: the badges stop standing out.
Use a combobox when the list is long enough to search, such as a city, a person or a tag.
For a handful of choices there is nothing to search: use a select, or radio buttons the reader sees at once.
Give it a label that stays in view while the reader types.
A placeholder is not a label: it goes as soon as typing starts, and the reader forgets what the box was for.
Anatomy
- The block, holding the box and, while open, the list.
- The control part, the input's well: it carries the input's classes, so its chrome, hover, focus, error, read-only and disabled looks and its two sizes are the input's.
- The lead part, with one choice whose option has a color: the chosen option's color swatch before the text, in the input's leading content. An option with an icon shows the icon there instead, as the input's icon.
- The values part, one row inside the well that wraps: the chips, then the text.
- The chip part, one per pick when the combobox takes several: a chip at its small size, with its remove cross, named "Remove" and the pick's label.
- The input part, the text box typed in, which is the combobox for a screen reader.
- In error, the input's error icon, a warning sign before the caret.
- The clear part, the search field's cross, shown while the box holds text or a choice. It empties the box and removes the choice.
- The caret part, the input's icon, in a press box that opens and closes the list.
- The list part, the dropdown panel itself (it carries the dropdown's classes at the combobox's size). Inside it, the options part, a listbox of option parts, each a dropdown item with its option label part and, for one choice, the check part on the chosen one; for several, the checkbox's small box on every option, ticked on each pick. Before the label an option may carry the option lead part, a color swatch at the item's icon size or the dropdown's icon; after it, the option detail part, quieter words in the select's second-line style, and the option badge part, a small badge.
- Groups of options, each the select's group part: the dropdown's label as its heading, the dropdown's group around its options, and the dropdown's divider before each group that follows something.
- The status part, a row the list shows instead of options: no results, loading with the turning ring, or an error with its icon, always in words. Its type is a modifier:
--type-no-results,--type-loading,--type-error. - The announcement part, for screen readers only: says the list is loading or failed as it happens.
- The label and the help text are not the combobox's: put it in a field.
Behavior
The box behaves as the input does: it lifts on hover, shows the field focus border when focused, and in error draws the danger border, kept while focused, and the warning icon. It comes in the input's two sizes, md and sm; the list's items follow the size.
Options can carry more than a label. A color swatch or an icon before it shows what the option is at a glance; quieter words or a badge after it add a fact, such as where a value comes from or a color's contrast. With one choice, the box shows the chosen option's swatch or icon before its label, so it says which color is chosen without opening; once the reader types something else, it goes until a choice is made again. Options can also come in groups, each under its heading, with a line between groups. Matching works through every group, and a group whose options all fail to match is left out, heading and all. The keys move from the last option of a group to the first of the next.
Typing opens the list under the box with the options that match what is typed, anywhere in the label by default, or only at its start, ignoring case and accents in the reader's language. Down and Up open the list on its first or last option, or on the chosen one, and then move the active option; focus never leaves the box. Enter picks the active option. With one choice, the list closes and the box shows the choice; with several, the pick becomes a chip before the text, the list stays open for the next, and Enter on a picked option removes it. Escape closes the list and puts the box back as it was before typing; a second Escape empties a single choice. Tab leaves and picks nothing. Leaving the box puts it back as well: what is typed is a search, never the value. The caret opens and closes the list with a press. With several picks, each chip's cross removes it, and Backspace in an empty box removes the last one.
onActiveChange tells the page which option is active, the one Enter would pick, before anything is picked: its value, and what made it active, the keys, the pointer moved onto it, or a mouse at rest that the list opened, changed or scrolled under. It is told null as the list closes or typing leaves no option active. A page can show the active option in a preview, such as a color on a sample, and leave out one that only came under a resting mouse, which the reader never moved to.
What is typed and the value chosen are kept apart, and each can be controlled from outside or left to the combobox. A page that finds the options itself, as a search on a server does, sets filter to none, passes the matches as the options as they arrive, and sets status to loading meanwhile, or to error when the search failed; an empty list says there are no results. The page cancels an earlier search when a newer one starts. While a search runs, keep the chosen options among the options passed, so the box can show their labels.
The open list shows over the whole page, so a part around the combobox that clips or scrolls never cuts it off, and it keeps the theme, density and text size of the place it opened from. It is as wide as the well, never taller than the system's list height or than the room it has in the window, under the well or above it when there is more room there, and stays beside the well as the page scrolls. A longer list scrolls inside itself with the system's scrollbar, a thin, see-through bar over its options that takes no room and shows while the mouse is over it or it scrolls, and a soft shade along its foot, and keeps the active option in view. With a mouse, the active option is the dropdown's sliding hover fill: it follows the pointer from option to option, lights the nearest option when the pointer is in the list's padding, where a click picks it, and steps aside while the keys move, so the keyboard's active option keeps its own focus ring. The list drops in with the dropdown's motion; under reduced motion it fades in and out without moving. The placing and the keys come from React Aria, which a React project installs beside React.
The box grows a row at a time as chips wrap, and the text keeps room for about eight characters after them. A long label on a chip is cut short with an ellipsis. A read-only combobox shows its choice or chips with no caret, no clear cross and no remove crosses, and stays in the tab order. A disabled one is dimmed and out of reach, its chips with it, and sends nothing with its form.
The value travels in hidden inputs when the combobox has a form name: one for a single choice, one for each pick. A required combobox stops its form being sent while nothing is chosen (for several, while none is picked): the box takes focus, the browser says why, and the combobox takes its error look until a choice is made. The form's reset puts the starting choice or picks back. A ref given to the React wrapper reaches the box typed in, so a page can focus it.
defaultOpen shows the list open from the start, as in a picture of the page; focus in the box makes it the working list.
Accessibility
What it does for you
- The box is a combo box with a list autocomplete that controls a listbox.
- The active option is announced through the active descendant, so focus stays in the box. While the box has focus, the active option carries the focus ring just inside its edge as well as its fill, so it is never shown by color alone.
- Each group is a group named by its heading, so a screen reader says the group as the active option moves into it.
- An option's name is its label, then its quieter words and its badge's words, each after a comma. Its swatch or icon is decoration: the label names the option.
- The number of matches is announced as the list opens and as it changes. The loading and error rows are announced as they appear; no results is said in words in the list.
- With several picks, the listbox says so, every option says whether it is picked, and each chip's cross is a button named "Remove" and the pick's label.
- While the list is open, the rest of the page is hidden from a screen reader, so its reading stays in the box and the list; it comes back as the list closes.
- The caret and the clear cross are out of the Tab order: the keys open the list and Escape empties the box. A screen reader can still reach and press them.
- An error marks the box invalid as well as drawing the danger border.
What you must do
- Give the box a label, from a field, or with
aria-labeloraria-labelledby. In development, a combobox with no name logs a warning in the console. - Put it in a field, which links its help text or error message to the box through
aria-describedbyand addsaria-requiredto the box when it is required. - Change the words of the chips' crosses with
removeLabelwhen the page is in another language. - Name each option in its label. A swatch's color is never the only way to tell two options apart; a badge's color says nothing its words do not.
- Written by hand, give an option with a badge or quieter words an
aria-labelof its label and those words, each after a comma, so they never run together.
How to test
- With the keyboard only, type a few letters, move with Down Arrow and Up Arrow, press Enter to pick, then press Escape. Focus stays in the box throughout.
- With a screen reader, the box is read as a combo box by its label, the number of matches is spoken as you type, and each option says whether it is picked.
- With several picks, the cross on each chip is read as "Remove" and the pick's label.
- In a list with groups, move through it with the arrow keys: each group's heading is said as the active option enters it, and each option says its badge's words.
- Trigger the loading and error rows: each is spoken as it appears.
- With text at 200% and the page 320 pixels wide, the box grows a row at a time and the list stays inside the window.
- In a forced-color mode, the active option still shows its ring.
Keyboard
| Key | What it does |
|---|---|
| Any character | Types in the box and opens the list with the options that match. |
| Down Arrow | Opens the list on the chosen option, or the first; with the list open, moves the active option down. |
| Up Arrow | Opens the list on the chosen option, or the last; with the list open, moves the active option up. |
| Enter | Picks the active option. With several picks, Enter on a picked option removes it. |
| Escape | Closes the list and puts the box back as it was before typing. A second Escape empties a single choice. |
| Tab | Leaves the box and picks nothing. |
| Backspace | With several picks and an empty box, removes the last pick. |
Source
The files the combobox is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-combobox — Combobox. Figma "Combobox" 7109:2214 over "Combobox popup" 7109:1317 and "List status row"
* 7109:1161. A box to type in that suggests matches from a list, for one choice or several.
* Figma builds it on other components, and so does the code: the well carries smbk-input, so its chrome, hover,
* focus, error, read-only, disabled and small size, its caret and its error icon are the input's own; each pick
* is a chip at its small size, removable; the open list is the dropdown panel with every option a dropdown item
* at the combobox's size, ticking with the checkbox's small box when it takes several; the loading row turns the
* spinner; the clear cross is the search field's. This stylesheet adds only what differs: a well that grows to
* hold wrapped chips, the text after them, the caret's press box, the active option, and the status row. */
.smbk-combobox {
position: relative;
display: inline-flex;
flex-direction: column;
width: 100%;
}
/* ---- the well: the input's, grown for chips that wrap. Its block padding sets one row of chips, as tall as a
large mark, in the middle of the input's height less its edge, so a single row keeps that height exactly and
each wrapped row adds its own. Two classes, so it wins over the input's fixed height whatever order the
stylesheets load in. ---- */
.smbk-input.smbk-combobox__control {
height: auto;
min-height: var(--smbk-size-control-md);
padding-block: calc((var(--smbk-size-control-md) - var(--smbk-size-mark-lg)) / 2 - var(--smbk-border-width-hairline));
}
.smbk-combobox--size-sm .smbk-input.smbk-combobox__control {
min-height: var(--smbk-size-control-sm);
padding-block: calc((var(--smbk-size-control-sm) - var(--smbk-size-mark-lg)) / 2 - var(--smbk-border-width-hairline));
}
/* The chips and the text, one row that wraps: chips sit the extra-small step apart either way, and the text
keeps room for about eight characters before it moves to a line of its own. */
.smbk-combobox__values {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
gap: var(--smbk-space-stack-xs) var(--smbk-space-inline-xs);
min-width: 0;
}
.smbk-input__control.smbk-combobox__input {
flex: 1 1 var(--smbk-size-80);
min-width: 0;
}
/* After the last chip the text keeps the input's own gap, as Figma's Leading content slot does. */
.smbk-combobox__chip + .smbk-combobox__input {
margin-inline-start: calc(var(--smbk-space-inline-md) - var(--smbk-space-inline-xs));
}
.smbk-combobox--size-sm .smbk-combobox__chip + .smbk-combobox__input {
margin-inline-start: calc(var(--smbk-space-inline-sm) - var(--smbk-space-inline-xs));
}
/* A chip never runs past the well: a long name is cut short with an ellipsis, across only. */
.smbk-combobox__chip {
max-width: 100%;
min-width: 0;
}
.smbk-combobox__chip .smbk-chip__label {
min-width: 0;
overflow-x: clip;
overflow-y: visible;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The caret is the input's icon part, so it takes the field's icon size and color; its button gives it a
24 px box, the least a press needs, reaching past the icon into the gap and the padding, so the caret sits
where Figma draws it. It is out of the Tab order: the arrow keys open the list. */
.smbk-combobox__caret {
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--smbk-size-target-min);
height: var(--smbk-size-target-min);
margin: calc((var(--smbk-size-icon-md) - var(--smbk-size-target-min)) / 2);
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
appearance: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-combobox--size-sm .smbk-combobox__caret {
margin: calc((var(--smbk-size-icon-sm) - var(--smbk-size-target-min)) / 2);
}
.smbk-combobox__caret:disabled {
cursor: not-allowed;
}
/* The clear cross is the search field's (smbk-search__clear) and keeps its look. */
.smbk-combobox__clear {
flex-shrink: 0;
}
/* ---- the open list: the dropdown panel under the well, as wide as the well ----
Without script the panel hangs from the combobox, under the well whatever its height; lifted over the page,
the dropdown's layer takes it and the wrapper sets its place and width. It keeps the well's width, narrower or
wider than a dropdown, and a long choice wraps inside it. A list longer than the list height, or than its room,
stops there and scrolls inside itself, the dropdown panel's own rule. */
.smbk-combobox .smbk-dropdown.smbk-combobox__list {
z-index: var(--smbk-layer-overlay);
width: 100%;
min-width: 0;
max-width: none;
}
.smbk-combobox__options {
display: flex;
flex-direction: column;
gap: var(--smbk-space-0);
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
.smbk-combobox__options > * {
flex-shrink: 0;
}
/* The active option, which the arrow keys move while focus stays in the box, takes the dropdown item's hover
fill. While the box has focus and the keys moved it, it also carries the focus ring, drawn just inside its
edge, so it is never shown by its fill alone; an option under the pointer takes the hover fill alone. */
/* Two classes, so the fill outweighs the dropdown item's own clear background, which the bundle loads after this
stylesheet. */
.smbk-dropdown__item.smbk-combobox__option--active {
background: var(--smbk-color-surface-hover);
}
/* While the pointer's fill shows (the dropdown's glide), it is the active option, so the option draws no second one. */
.smbk-combobox__list[data-glide="lit"] .smbk-combobox__option--active {
background: transparent;
}
/* Any option, in a group or not: the options of a group sit in the group's own list. */
.smbk-combobox:focus-within [data-highlight="keys"] .smbk-combobox__option--active {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: calc(-1 * var(--smbk-focus-ring-width));
}
/* ---- what an option carries besides its label: a color swatch before it, at the item's icon size (the dropdown's
icon part draws an icon there), then quieter words, the select's second line set after the label instead of under
it, and a small badge, before the tick. The label takes the room; the words after it are cut short with an
ellipsis before the badge moves. Groups are the select's: the dropdown's label over the dropdown's group, a line
between them. ---- */
.smbk-combobox__option-detail {
flex: 0 1 auto;
min-width: 0;
}
.smbk-combobox__option-badge {
flex-shrink: 0;
}
/* A disabled option dims its swatch and its badge with its words. */
.smbk-combobox__option[aria-disabled="true"] :is(.smbk-color-swatch.smbk-combobox__option-lead, .smbk-combobox__option-badge) {
opacity: var(--smbk-opacity-disabled);
}
/* ---- the status row: what the list says instead of options, in words: no results, loading with the turning
ring, or an error with its icon. Body SM in the secondary text color at both sizes; one line keeps the
medium control height. ---- */
.smbk-combobox__status {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--smbk-space-inline-md);
min-height: var(--smbk-size-control-md);
margin: 0;
padding: var(--smbk-space-inset-lg);
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.smbk-combobox--size-sm .smbk-combobox__status {
padding-block: var(--smbk-space-inset-md);
}
/* The spinner keeps its small subtle ring and its words, set the row's gap apart. */
.smbk-combobox__status .smbk-spinner {
gap: var(--smbk-space-inline-md);
}
.smbk-combobox__status .smbk-spinner__label {
white-space: normal;
}
.smbk-combobox__status--type-error {
color: var(--smbk-color-feedback-danger-text-on-subtle);
}
.smbk-combobox__status-icon {
flex-shrink: 0;
color: var(--smbk-color-feedback-danger-icon);
font-size: var(--smbk-size-icon-sm);
}
/* What a screen reader hears as the list loads or fails, for screen readers only. */
/* .smbk-combobox__announcement: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- touch: the picks, the clear cross and the caret take invisible press areas ----
On a touch screen the caret takes an invisible area, centred on it, out to the comfortable target, as the clear
cross and each pick's remove cross do; between the two buttons, and toward the text before them, each area reaches
only halfway into the gap. In the row of picks, which wraps, every remove cross and the text reach only halfway into
the row's gaps, so each pick stays one press. Nothing drawn moves and the well keeps its height. */
@media (pointer: coarse) {
.smbk-combobox__caret {
position: relative;
}
.smbk-combobox__caret::after {
content: '';
position: absolute;
inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
}
.smbk-input > .smbk-combobox__caret::after {
inset-inline-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-md) + (var(--smbk-size-icon-md) - var(--smbk-size-target-min)) / 2) / -2);
}
.smbk-input > .smbk-combobox__clear:has(+ .smbk-combobox__caret)::after {
inset-inline-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-md) + var(--smbk-size-icon-md) - var(--smbk-size-target-min)) / -2);
}
.smbk-input > .smbk-combobox__clear + .smbk-combobox__caret::after {
inset-inline-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-md) + var(--smbk-size-icon-md) - var(--smbk-size-target-min)) / -2);
}
.smbk-combobox--size-sm .smbk-input > .smbk-combobox__caret::after {
inset-inline-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-sm) + (var(--smbk-size-icon-sm) - var(--smbk-size-target-min)) / 2) / -2);
}
.smbk-combobox--size-sm .smbk-input > .smbk-combobox__clear:has(+ .smbk-combobox__caret)::after {
inset-inline-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-sm) + var(--smbk-size-icon-sm) - var(--smbk-size-target-min)) / -2);
}
.smbk-combobox--size-sm .smbk-input > .smbk-combobox__clear + .smbk-combobox__caret::after {
inset-inline-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), (var(--smbk-space-inline-sm) + var(--smbk-size-icon-sm) - var(--smbk-size-target-min)) / -2);
}
.smbk-combobox__values .smbk-chip__remove::after {
inset-inline: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-inline-xs) / -2);
inset-block: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-xs) / -2);
}
.smbk-combobox__values > .smbk-input__control {
padding-block: max(0%, min((var(--smbk-size-target-comfortable) - 1lh) / 2, var(--smbk-space-stack-xs) / 2));
margin-block: min(0%, max((1lh - var(--smbk-size-target-comfortable)) / 2, var(--smbk-space-stack-xs) / -2));
}
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
/* The active option in the open list. */
.smbk-dropdown__item.smbk-combobox__option--active {
forced-color-adjust: none;
background: Highlight;
color: HighlightText;
}
.smbk-combobox__option--active .smbk-dropdown__icon,
.smbk-combobox__option--active .smbk-select__option-description {
color: inherit;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| size.control.md--smbk-size-control-md | comfortable: 40pxcompact: 32pxchanges with density | Size | |
| size.mark.lg--smbk-size-mark-lg | 24px | Size | |
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| size.control.sm--smbk-size-control-sm | comfortable: 32pxcompact: 28pxchanges with density | Size | |
| space.stack.xs--smbk-space-stack-xs | 4px | Spacing | |
| space.inline.xs--smbk-space-inline-xs | 4px | Spacing | |
| size.80--smbk-size-80 | 80px | Size | |
| space.inline.md--smbk-space-inline-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| space.inline.sm--smbk-space-inline-sm | comfortable: 6pxcompact: 4pxchanges with density | Spacing | |
| size.target.min--smbk-size-target-min | 24px | Size | |
| size.icon.md--smbk-size-icon-md | 20px | Size | |
| size.icon.sm--smbk-size-icon-sm | 16px | Size | |
| layer.overlay--smbk-layer-overlay | 1200 | Stacking order | |
| space.0--smbk-space-0 | 0px | Spacing | |
| color.surface.hover--smbk-color-surface-hover | light: #373d4326dark: #606a754dchanges with theme | Color | |
| focus.ring.width--smbk-focus-ring-width | 2px | Focus | |
| color.border.focus--smbk-color-border-focus | light: #cc0d0ddark: #f34336changes with theme | Color | |
| opacity.disabled--smbk-opacity-disabled | 0.5 | Opacity | |
| space.inset.lg--smbk-space-inset-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| space.inset.md--smbk-space-inset-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| color.feedback.danger.text-on-subtle--smbk-color-feedback-danger-text-on-subtle | light: #a51d17dark: #febdb2changes with theme | Color | |
| color.feedback.danger.icon--smbk-color-feedback-danger-icon | light: #cc0d0ddark: #fe7d6dchanges with theme | Color | |
| size.target.comfortable--smbk-size-target-comfortable | 44px | Size |
Manifest
{
"name": "combobox",
"block": "smbk-combobox",
"summary": "A box to type in that suggests matches from a list, for one choice or several: the input’s well, the dropdown panel under it, and each pick a chip.",
"adapt": "css",
"axes": {
"selection": {
"values": [
"single",
"multiple"
],
"default": "single",
"description": "One choice, shown as text in the box, or several, each kept as a removable chip before the text, with a tick box on every option. Figma calls this \"Mode\"."
},
"size": {
"values": [
"md",
"sm"
],
"default": "md",
"description": "The input’s two heights, with the dropdown’s items at the same size when open. Small text never goes under 16 px on a phone."
}
},
"flags": {
"error": {
"description": "The value is invalid. Draws the danger border, kept while focused, and the error icon before the caret."
}
},
"parts": [
"control",
"lead",
"values",
"chip",
"input",
"clear",
"caret",
"list",
"options",
"option",
"option-lead",
"option-label",
"option-detail",
"option-badge",
"check",
"status",
"status-icon",
"announcement"
],
"figmaNodeId": "7109:2214"
}