SenseSelect — ArtificialSense UI

Overview

Category: Form / inputs. Selector: sense-select. Import: import { SenseSelectComponent } from '@artificialsenselabs/ui';

<sense-select
  label="Country"
  [options]="countries"
  [searchable]="true"
  [(ngModel)]="country"
/>

Generated from libs/ui/src/lib/select/sense-select/sense-select.component.ts — run pnpm run docs:api to refresh.

Inputs
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`	Shows a filter field inside the open panel.
`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.
`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.
`required`	`boolean`	`false`	Marks the control required for validation and ARIA.

Host exposes combobox semantics: aria-expanded, aria-controls, aria-activedescendant.
Visible labels use aria-labelledby; standalone controls use aria-label.
Searchable mode announces filtered result counts via a polite live region.
Keyboard: Arrow keys, Enter/Space, Home/End, Escape, and typeahead.