Docs / Components
SenseSelectComponent
Combobox-style select from @artificialsenselabs/ui — composes sense-icon, sense-icon-button, and sense-spinner.
Live demo: run nx serve showcase and open /components/select (port 4202).
Overview
Category: Form / inputs. Selector: sense-select. Import: import { SenseSelectComponent } from '@artificialsenselabs/ui';
<sense-select
label="Country"
[options]="countries"
[searchable]="true"
[(ngModel)]="country"
/>API
Generated from libs/ui/src/lib/select/sense-select/sense-select.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
options | SenseSelectOption[] | [] | Label/value options rendered in the listbox. |
size | SenseSelectSize | 'md' | Trigger control scale token. |
variant | SenseSurfaceVariant | 'outlined' | Field chrome: `outlined` (default), `filled`, or `ghost`. |
multiple | boolean | false | Allow multiple selections; the CVA value becomes an array. |
searchable | boolean | false | Turns the control into a filter field; typing narrows the listbox. |
placeholder | string | '' | Placeholder shown on the trigger when nothing is selected. |
disabled | boolean | false | Disables interaction and dims the control. |
loading | boolean | false | Shows a busy indicator and suppresses interaction while options load. |
label | string | '' | Visible label text. |
hint | string | null | null | Supporting hint rendered below the label and wired via `aria-describedby`. |
error | string | null | null | Validation error message; sets `aria-invalid` and a live alert region. |
ariaLabel | string | null | null | Accessible name override when no visible `label` is provided. |
ariaLabelledBy | string | null | null | `id` of an external element labelling the control (`aria-labelledby`). |
invalid | boolean | false | Marks the control invalid for ARIA and error styling (use with or without `error`). |
required | boolean | false | Marks the control required for validation and ARIA. |
autofocus | boolean | false | Focuses the combobox element after the first render when true. |
| Output | Type | Description |
|---|---|---|
selectionChange | SenseSelectChangeEvent | Emitted when the user changes the selection or clears the value. |
selectFocus | FocusEvent | Emitted when the combobox element receives focus. |
selectBlur | FocusEvent | Emitted when the combobox element loses focus. |
Accessibility
- Host exposes combobox semantics:
aria-expanded,aria-controls,aria-activedescendant. - Visible labels use
aria-labelledby; standalone controls usearia-label. - Searchable mode announces filtered result counts via a polite live region.
- Keyboard: Arrow keys, Enter/Space, Home/End, Escape, and typeahead.