Select, Asgard Docs

Inputs & forms

Choose one value from a list.

Dropdown select component built on the TextBox styling system for visual consistency.

Key features:

Single selection with disabled options
autocomplete mode for type-to-filter searching
Semantic color variants and three sizes
Width modes: fixed, full, flex
Helper text, error state, and required field support

Loading preview…

When to use it

Choosing from many options (country, theme, language)
Filters and toolbars
Form fields with a fixed value set
Type-to-search (autocomplete) and multi-select

Properties

Prop	Type	Default	Description
`options`	`SelectOption[]`	—	Array of { value, label, disabled? } options
`value`	`string \| number`	—	Controlled selected value
`defaultValue`	`string \| number`	—	Uncontrolled initial value
`onChange`	`(value: string \| number) => void`	—	Called when selection changes The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value).
`placeholder`	`string`	—	Placeholder text when no value is selected
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	Input size
`variant`	`'outlined' \| 'underline'`	`'outlined'`	Visual style of the input
`semantic`	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info'`	—	Semantic color applied to border and focus ring
`width`	`'fixed' \| 'full' \| 'flex'`	`'flex'`	Width behavior
`fixedWidth`	`number`	—	Width in pixels when width="fixed"
`disabled`	`boolean`	`false`	Disable the select
`readonly`	`boolean`	`false`	Read-only mode
`required`	`boolean`	`false`	Mark as required field
`error`	`boolean`	`false`	Show error state
`helperText`	`string`	—	Helper or error text below the input
`autocomplete`	`boolean`	`false`	Enable type-to-filter autocomplete mode

Notes

Autocomplete mode filters after 2 characters are typed.
Individual options can be disabled via the disabled property.
Use width="full" inside flex containers for responsive layouts.

Presets