Select Module

The Select module provides styled dropdown inputs with configurable colors, border, background, placeholder styling, focus/disabled/error states, and optional shake animation. It also supports custom icons and checked option styling.

Primary Select:option aoption boption c

This is a help block

Shade Select:option aoption boption c

This is a help block

Invalid Select:option aoption boption c

This is a error block

Disabled Select:option aoption boption c

Signature:

@mixin use-select($colors: ());

Example:

@include termeh.use-select(("primary", "error"));

Module:

This module is registered as form-select in the presented modules.

Dependencies

Select module uses the following Termeh global var():

Component	Type	Usage	Default
base → separator	Color	Fallback border color	null
radius → normal	Number	Default input border radius	null
gap → micro	Number	Spacing between select items	8px
input → height	Number	Input height	2.8em
input → border	Color	Default input border color	FALLBACK
input → placeholder	Color	Default input placeholder color	FALLBACK
input → background	Color	Default input background color	white
input → disabled-foreground	Color	Disabled option text color	null

---

Select module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
error	Accent color for invalid state	error
primary	Default accent color	error
primary → foreground	Default accent color	null
primary → readable	Default accent color	null
shade → mute	Fallback placeholder color	null
base → section	Item hover background color	null

Modifiers

• .is-focused / :focus → applies focus styling
• .is-invalid / :invalid → applies error styling with shake animation
• .is-disabled / :disabled → applies disabled styling
• .is-<color> → applies a registered color as accent color