Select Component
The select element uses the same input-* utility classes as text inputs. All variants, colors, sizes, shapes, and width modifiers work.
Notes
- All
input-* utilities apply to select — variants, colors, sizes, shapes, and widths.
input-pill does NOT work with select[multiple].- Prefer compound variant colors like
input-subtle-primary over input-subtle input-primary — smaller CSS output.
- Multi-select height: use
--input-count (number of rows) or max-height CSS property.
Variants
Default
.input-subtle
.input-ghost
.input-underline
.input-outline
Theme colors (primary)
Each color shown with all 5 variants: default, subtle, muted, ghost, underline, outline.
Primary
Secondary
Tertiary
Success
Error
Info
Highlight
Warning
Caution
Ink
Title
Description
Caption
Placeholder
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Tailwind + raw colors
Sizes (input-4 ~ input-15)
16px (input-4)
20px (input-5)
24px (input-6)
28px (input-7)
32px (input-8, default)
36px (input-9)
40px (input-10)
44px (input-11)
48px (input-12)
52px (input-13)
56px (input-14)
60px (input-15)
Shapes
input-pill
input-rounded
input-fluid
input-square
Width modifiers
input-scale (fixed 400px)
input-scale-2 (2x / 800px)
input-full (100%)
input-inline (content-width)
input-inline + colors
Multi-select (multiple)
Default
With variant
Height control via --input-count
Height control via max-height