StartFoundationsComponentsContent
Overview
Button Icon button Split button Button group Toggle button Toggle button group
Badge Banner Empty state Progress bar Progress ring Section message Skeleton Spinner Toast
Field Input Textarea Number input Number stepper Search field OTP input Phone input Checkbox Radio group Switch Slider Selection card Inline edit
Select family Select Combobox Multiselect Country select Date picker Date range picker Time picker Calendar Emoji picker
Dialog Sheet Popover Menu Tooltip
Sidebar Navigation menu Tab bar Segmented control Breadcrumb Pagination Tree
Table Data table Avatar Avatar group Tag Icon Image
Text Prose Link Code block Kbd
Accordion Collapsible Divider Scroll area Splitter Aspect ratio
Page header

Select family

Four fields for choosing from a list. They share one menu, keyboard model, and set of states; they differ in how people find options and how many they can choose.

Stable
OverviewUsage

Select

<tk-select aria-label="Department" placeholder="Select a department">
  <option>Design</option>
  <option>Engineering</option>
  <option>Finance</option>
</tk-select>

A button that opens a closed list. Typing a letter jumps to a match.

Combobox

<tk-combobox aria-label="City" placeholder="Start typing a city">
  <option>Amsterdam</option>
  <option>Berlin</option>
  <option>Copenhagen</option>
  <option>Lisbon</option>
</tk-combobox>

A text field that filters the list as people type. Options can come from markup, an array, or your server. creatable lets people add their own value.

Multiselect

<tk-multiselect aria-label="Colors" placeholder="Choose colors">
  <option selected>Red</option>
  <option>Green</option>
  <option selected>Blue</option>
</tk-multiselect>

Chosen options show as chips. The menu stays open while people choose. It filters like a Combobox with searchable, and max caps the choice.

Country select

<tk-country-select aria-label="Country" value="NL"></tk-country-select>

A Combobox with every country, localized names, and flags built in. The value is the two-letter code.

What they share

  • Naming: put any of them in a Field for a label, helper, and error, or set aria-label.
  • Sizes: medium (32px) and large (36px), matching Input and Button.
  • States: disabled (not focusable, not submitted) and readonly (focusable and submitted, but can't change).
  • Menu: the same rows, check marks, and group headers, from <option> and <optgroup> children.
  • Filter bars: Select and Multiselect have variant="filter", a compact button with filter-label.
<tk-select variant="filter" filter-label="Status">
  <option>Open</option>
  <option>Closed</option>
</tk-select>
<tk-multiselect variant="filter" filter-label="Labels">
  <option>Bug</option>
  <option>Feature</option>
</tk-multiselect>