Trivela UI

Select

A native select element with Option and OptionGroup, with variant and color token support.

The open dropdown list is drawn by the operating system. The variant and color tokens style the closed Select box — border, hover, and focus ring — which is reliable everywhere. The highlight on the option you hover inside the open list is the OS accent colour and cannot be overridden; classes on Option and OptionGroup only apply where the browser lets CSS through (Chrome and Firefox on Windows and Linux). Never let colour alone carry meaning inside a dropdown.

Usage

select-demo.tsx
import { Select, Option, OptionGroup, Label } from 'trivela-ui';

export function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="framework">Framework</Label>
      <Select id="framework">
        <Option value="next">Next.js</Option>
        <Option value="remix">Remix</Option>
      </Select>
    </div>
  );
}

Examples

With label

Match htmlFor to the select id so the caption focuses the control.

Colors

The resting border stays neutral so a form reads calmly; the token appears on hover and focus. Hover each one to see it — color defaults to primary.

Variants

Four style variants, matching Input. Every one picks up the color token on hover.

Option groups

OptionGroup requires a label — an optgroup without one renders an empty header, so the prop is mandatory rather than optional.

With a placeholder

A disabled, empty-valued first Option acts as the placeholder that native select otherwise lacks.

Disabled options and groups

disabled works on a single Option or on a whole OptionGroup, which greys out every child at once.

Multiple selection

With multiple, the browser renders an inline list instead of a dropdown — and there the Option classes do apply on every platform.

API Reference

PropTypeDefaultDescription
variant'solid' | 'ghost' | 'outline' | 'subtle''solid'Select only — style variant for the closed box.
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''primary'Select only — color scale for the hover border and focus ring.
size'sm' | 'md' | 'lg''md'Select only — control height, matching Button and Input.
classNamestring—Merged with the generated classes via cn().
...props (Select)SelectHTMLAttributes<HTMLSelectElement>—Native select attributes — value, defaultValue, multiple, disabled, onChange.
...props (Option)OptionHTMLAttributes<HTMLOptionElement>—Native option attributes — value, disabled, selected.
label (OptionGroup)string—Required. The group heading shown in the dropdown.
...props (OptionGroup)OptgroupHTMLAttributes<HTMLOptGroupElement>—Native optgroup attributes — disabled greys out every child Option.