Tessina UI
Tessina UI
GitHubIntroduction
InstallationUsageTheming
Components
ButtonIconButtonLinkSpinnerBadgeAvatarStatusChipShortcutSkeletonSurfaceProgressMeterRating
LabelFieldFieldsetCheckboxRadioSwitchSliderSelectComboboxSearchTextareaNumberFieldDate PickerTime PickerOTP InputFile UploadCalendar
AlertBannerToastTooltip
TabsAccordionCollapsibleBreadcrumbPaginationStepperSegmentedControlButtonGroupToggleButtonToggleGroupToolbarNavigation MenuMenubarBottom NavSidebar
Split ButtonFABDropdown MenuContextMenuCommandPopoverHoverCard
ContainerStackFlexGridAspectRatioSpacerCardCarouselDividerScroll Area
Table
ChatBubblePromptInputCodeBlock
ModalAlertDialogDrawerAction SheetTop Header MobileTop Header DesktopEmptyStateForm
Contributing
ComponentsForm Blocks

Combobox

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

Playground

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

Select

Keyboard-accessible dropdown select with intent variants, sizes, grouped options, leading icons, item descriptions, and label position options.

Search

A search input with built-in search icon, clear button, optional submit button, loading state, and full RTL support. Follows the Field component's design language with three visual variants.

On this page

PlaygroundInstallationUsageAPI ReferenceComboboxRoot propsComboboxItem propsComboboxLeadingIcon propsComboboxFilterTabs propsComboboxFilterTab props