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

Select

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

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  SelectRoot,
  SelectTrigger,
  SelectPopup,
  SelectScrollUpArrow,
  SelectScrollDownArrow,
  SelectList,
  SelectItem,
  SelectGroup,
  SelectGroupLabel,
  SelectSeparator,
} from "@tessinaui/ui";
{/* Basic */}
<SelectRoot label="Fruit" value={value} onValueChange={setValue}>
  <SelectTrigger placeholder="Select a fruit…" />
  <SelectPopup>
    <SelectList>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
    </SelectList>
  </SelectPopup>
</SelectRoot>

{/* Grouped with scroll arrows */}
<SelectRoot label="Region" value={value} onValueChange={setValue}>
  <SelectTrigger placeholder="Select a region…" />
  <SelectPopup>
    <SelectScrollUpArrow />
    <SelectList>
      <SelectGroup>
        <SelectGroupLabel>Europe</SelectGroupLabel>
        <SelectItem value="fr">France</SelectItem>
        <SelectItem value="de">Germany</SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectGroupLabel>Asia Pacific</SelectGroupLabel>
        <SelectItem value="jp">Japan</SelectItem>
        <SelectItem value="au">Australia</SelectItem>
      </SelectGroup>
    </SelectList>
    <SelectScrollDownArrow />
  </SelectPopup>
</SelectRoot>

Examples

Default

A labelled select with a placeholder and a default selected value.

Sizes

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

Intents

Border and focus-ring colours for none, error, warning, success, and info.

Leading Icon

Add an icon at the start of the trigger via the leadingIcon prop.

Item Descriptions

Give each item secondary text with the description prop.

Grouped Options

Organise items into labelled groups separated by dividers.

API Reference

SelectRoot props

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg" | "xl""md"Trigger height and text scale
intent"none" | "error" | "warning" | "success" | "info""none"Border and focus-ring colour
rounded"none" | "sm" | "md" | "lg" | "full""full"Border radius of the trigger
labelPosition"outside-top" | "inside" | "outside-left""outside-top"Label layout relative to the trigger
labelstring—Label text
requiredboolean—Appends * to label
infoTextstring—Inline hint shown beside the label
supportingTextstring—Helper / validation text below the trigger
valuestring | null—Controlled selected value
defaultValuestring | null—Uncontrolled initial value
onValueChange(value: string | null) => void—Called when selection changes
disabledboolean—Disables the whole select
namestring—Native form field name
dir"ltr" | "rtl""ltr"Text direction
wrapperClassNamestring—Class for the outermost wrapper div

SelectTrigger props

PropTypeDescription
leadingIconReactNodeIcon at the start of the trigger, before the value
placeholderstringText shown when no value is selected
classNamestringExtra classes on the trigger button

SelectItem props

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

SelectPopup props

PropTypeDescription
positionerPropsobjectForwarded to the Positioner element (e.g. sideOffset, alignOffset)
classNamestringExtra classes on the popup panel

SelectList props

PropTypeDescription
classNamestringUseful for capping height: className="max-h-60"

All other sub-components (SelectGroup, SelectGroupLabel, SelectSeparator, SelectScrollUpArrow, SelectScrollDownArrow, SelectSupportingText) forward all standard HTML element props plus className.

SegmentedControl

A radio-group style control where one segment is selected at a time, with outline, filled, and pill variants, horizontal and vertical orientations, and full keyboard navigation

Shortcut

Keyboard shortcut badges for documenting and displaying key combinations. Includes a standalone Key component for individual keys and a Shortcut wrapper for combos with configurable separators and RTL support.

On this page

PlaygroundInstallationUsageExamplesDefaultSizesIntentsLeading IconItem DescriptionsGrouped OptionsAPI ReferenceSelectRoot propsSelectTrigger propsSelectItem propsSelectPopup propsSelectList props