HTML select
@xui/html-selectA styled native <select> — the platform dropdown, keyboard and mobile behaviour kept, only framed with a chevron. Options as data or projected <option> elements. Full ControlValueAccessor.
Install
pnpm add @xui/html-select Add the barrel to a standalone component's imports:
import { XuiHtmlSelectImports } from '@xui/html-select';
@Component({
imports: [XuiHtmlSelectImports],
// …
})Examples
Default
Loading preview…
<xui-html-select class="w-56" [options]="options" [(ngModel)]="sort" aria-label="Sort" />
<p class="text-foreground-muted mt-3 text-sm">Sort: {{ sort }}</p>With placeholder
Loading preview…
<xui-html-select class="w-56" placeholder="Choose an environment" [options]="options" aria-label="Environment" />Projected
Loading preview…
<xui-html-select class="w-56" aria-label="Country">
<option value="us">United States</option>
<option value="cz">Czechia</option>
<option value="jp">Japan</option>
</xui-html-select>Small
Loading preview…
<xui-html-select class="w-40" size="sm" [options]="options" value="25" aria-label="Per page" />API
A styled native <select>.
Variants
sizemdfillfalseInputs
classClassValueThe user-defined classes on the wrapper. Merged last so they win.''sizeXuiHtmlSelectVariants['size']Control height, from the shared control scale.this.config.sizefillbooleanStretch to the available width instead of hugging its contents.this.config.filloptionsreadonly XuiHtmlSelectOption<T>[]Options as data; alternatively, project <option> elements.[]placeholderstring | nullA leading, unselectable prompt shown when nothing is chosen.nullariaLabelstring | nullAccessible name for the select, when no <label> points at it.nulldisabledbooleanBlock interaction and dim the control.false