Dasar UI Library

Select

A customizable dropdown selection component supporting single and multiple values, inline searching, and rich custom templates.

Basic Usage

Country

Select your country

Bound Value: ()=>jg(t)

Appearance & Sizes

Outline (Default)

Select item

Filled Appearance

Select item

Small Size

Select item

Medium Size

Select item

Large Size

Select item

Searchable List

Searchable Select

Type to filter...

Multiple Selection Modes

Multiple (Text Display)

Bob Smith

Multiple (Chip Display)

Validation & States

Error State

Select item

Please select a valid option.

Disabled State

Select item

Field locked.

Loading State

Select item

Fetching data...

Custom Templates & Slots

Custom Option Rendering

Select item

Status Filter

Clear All

Filter by status

API Reference

Property	Type	Default	Description
`value`	`any \| any[]`	'' \| []	The selected value(s). Supports [(ngModel)] and Reactive Forms.
`options`	`DasarSelectOption[]`	[]	Array of objects: { label, value, disabled?, iconName?, chipVariant? }.
`multiple-type`	`'text' \| 'chip' \| null`	null	Enables multi-select. Displays chosen items as comma-separated text or interactive chips.
`searchable`	`boolean`	false	Shows an inline text input to filter the options array.
`clearable`	`boolean`	false	Shows an "x" icon to clear the selection.
`appearance`	`'outline' \| 'filled'`	'outline'	Visual style of the main trigger container.
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Sizing scale for the trigger and options.
`radius`	`ScaleAttributeType`	'md'	Border radius.
`label / placeholder / hint`	`string`	undefined	Text elements for context.
`loading`	`boolean`	false	Shows a spinner inside the trigger and dropdown.
`error`	`boolean`	false	Applies red validation styling.
`disabled`	`boolean`	false	Prevents interaction.
`full-width`	`boolean`	false	Expands component to 100% width.
`(valueChange) / (searchChange)`	`EventEmitter`	-	Emitted when selection or search query updates.
`[...-slot]`	`Content Slot`	-	Directives like [prefix-slot], [option-empty-slot], [option-loading-slot].
`option-template / chip-template`	`TemplateRef<any>`	-	Structural directives to override rendering of options and chips.