Tessina UI
ConfiguratorGitHubIntroduction
InstallationUsageTheming
ComponentsAccordionAction SheetAlertAlertDialogArea ChartAspectRatioAvatarBadgeBannerBar ChartBottom NavBreadcrumbButtonButtonGroupCalendarCardCarouselChartChatBubbleCheckboxChipCodeBlockCollapsibleColor PickerComboboxCommandContainerContextMenuDate PickerDividerDrawerDropdown MenuEmptyStateFABFieldFieldsetFile UploadFile Upload 2FlexFormGridHoverCardIconButtonLabelLine ChartLinkMenubarMeterModalNavigation MenuNumberFieldOTP InputPaginationPie ChartPopoverProgressPromptInputRadar ChartRadial ChartRadioRatingScroll AreaSearchSegmentedControlSelectShortcutSidebarSkeletonSliderSpacerSpinnerSplit ButtonStackStatusStepperSurfaceSwitchTableTabsTextareaTime PickerToastToggleButtonToggleGroupToolbarTooltipTop Header DesktopTop Header Mobile
Contributing
Components

Combobox

Filterable select with single and multi-select modes, grouped options, chips, loading and empty states, and all Field variants.

Playground

Examples

Default

A single-select combobox with a label, clear button, and filterable list.

Multiple

Multi-select mode renders chosen values as removable chips inside the input.

Grouped

Options organized under group labels for easier scanning of long lists.

Sizes

Five height and text scales — xs, sm, md, lg, and xl.

Validation

The intent prop colors the border, ring, and supporting text for error and success states.

Loading

A skeleton placeholder that matches the trigger height while options load.

Installation

pnpm add @tessinaui/ui

Usage

import {
  ComboboxRoot,
  ComboboxInputGroup,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxClear,
  ComboboxLeadingIcon,
  ComboboxPopup,
  ComboboxList,
  ComboboxItem,
  ComboboxEmpty,
  ComboboxFilterTabs,
  ComboboxFilterTab,
} from "@tessinaui/ui";
{/* Single select */}
<ComboboxRoot label="Fruit" value={value} onValueChange={setValue}>
  <ComboboxInputGroup>
    <ComboboxInput placeholder="Search…" />
    <ComboboxClear />
    <ComboboxTrigger />
  </ComboboxInputGroup>
  <ComboboxPopup>
    <ComboboxList>
      <ComboboxItem value="apple">Apple</ComboboxItem>
      <ComboboxItem value="banana">Banana</ComboboxItem>
      <ComboboxEmpty />
    </ComboboxList>
  </ComboboxPopup>
</ComboboxRoot>

{/* Multi-select with chips */}
<ComboboxRoot multiple label="Fruits" value={values} onValueChange={setValues}>
  <ComboboxInputGroup>
    <ComboboxChips>
      {values.map((v) => (
        <ComboboxChip key={v} value={v}>
          {v}
          <ComboboxChipRemove />
        </ComboboxChip>
      ))}
      <ComboboxInput placeholder="Search…" />
    </ComboboxChips>
    <ComboboxClear />
    <ComboboxTrigger />
  </ComboboxInputGroup>
  <ComboboxPopup>
    <ComboboxList>
      <ComboboxItem value="apple">Apple</ComboboxItem>
      <ComboboxItem value="banana">Banana</ComboboxItem>
      <ComboboxEmpty />
    </ComboboxList>
  </ComboboxPopup>
</ComboboxRoot>

API Reference

ComboboxRoot props

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg" | "xl""md"Input height and text size
intent"none" | "error" | "warning" | "success" | "info""none"Border and focus-ring color
rounded"none" | "sm" | "md" | "lg" | "full""full"Border radius
labelPosition"outside-top" | "inside" | "outside-left""outside-top"Label layout position
labelstring—Label text
requiredboolean—Adds asterisk to label and aria-required
infoTextstring—Inline info hint shown next to label
supportingTextstring—Helper/error text below the input
multiplebooleanfalseEnables multi-select with chips
valuestring | string[]—Controlled selected value(s)
defaultValuestring | string[]—Uncontrolled initial value(s)
onValueChange(value) => void—Called when selection changes
disabledboolean—Disables the whole combobox
autoHighlightbooleanfalseAuto-highlights first matching item while filtering
dir"ltr" | "rtl""ltr"Text direction
wrapperClassNamestring—Class applied to the outermost wrapper div

ComboboxItem props

PropTypeDescription
valueanyThe value this item represents
disabledbooleanPrevents selection
leadingIconReactNodeIcon shown before the label
leadingAvatarReactNodeAvatar shown before the label
descriptionstringSecondary text shown below the label

ComboboxLeadingIcon props

PropTypeDescription
onClick() => voidMakes the icon interactive (pointer cursor + hover); omit for decorative

Renders a size-responsive icon slot at the very start of ComboboxInputGroup, before the input or chips. Accepts any ReactNode as children — pass a Lucide icon, an Avatar, or any element.

ComboboxFilterTabs props

PropTypeDefaultDescription
valuestring—The currently active tab value
onValueChange(v: string) => void—Called when a tab is clicked

Renders a horizontal row of filter tabs inside ComboboxPopup, above the list. Tabs are purely visual — wire onValueChange to filter the items array yourself.

ComboboxFilterTab props

PropTypeDescription
valuestringThe value this tab represents
countnumberOptional count badge shown after the label

Color Picker

Figma-style color picker — saturation/value canvas, hue and alpha sliders, eyedropper, HEX/RGB/HSL inputs, swatch libraries, and a WCAG contrast checker with a live boundary curve. Supports light/dark, RTL, and mobile touch targets.

Command

Command palette / ⌘K menu — filterable, keyboard-driven action launcher with inline and modal modes, grouped items, descriptions, breadcrumbs, shortcuts, and footer key hints.

On this page

PlaygroundExamplesDefaultMultipleGroupedSizesValidationLoadingInstallationUsageAPI ReferenceComboboxRoot propsComboboxItem propsComboboxLeadingIcon propsComboboxFilterTabs propsComboboxFilterTab props