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"
/>

Groups, filtering and checkboxes

options takes plain options and { label, items } groups, mixed freely (SenseSelectOptionGroup). A group label is a non-selectable heading; groups with no matching option are hidden while filtering.

searchable filters by label, ignoring case and diacritics (sao finds São Paulo). Pass filterMatch to match on something else. showCheckboxes draws a checkbox on each row in multiple mode; clearable (default true until 1.0, then false) controls the clear button and cleared reports its use; it replaces the deprecated showClear.

<sense-select
  label="Sites"
  [options]="[
    { label: 'Remote', value: 'remote' },
    { label: 'Europe', items: [{ label: 'Zürich', value: 'zrh' }] },
  ]"
  [multiple]="true"
  [searchable]="true"
  [showCheckboxes]="true"
  [(ngModel)]="sites"
/>

API

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`	`SenseSelectItem[]`	`[]`	Options rendered in the listbox. Entries may be plain options or `{ label, items }` groups, mixed freely; groups render as labelled, non-selectable headings.
`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. Matching is by label, case- and diacritic-insensitive, unless `filterMatch` replaces it.
`filterMatch`	`SenseSelectFilterFn \| null`	`null`	Replaces the default label match while `searchable`. `null` keeps the built-in matcher.
`clearable`	`boolean \| undefined`	`undefined`	Shows the clear button while a value is selected. Left unset, it follows the deprecated `showClear` (default `true`); when both are set, `clearable` wins. The default becomes `false` at 1.0 (ADR-0056 D3a).
`showClear`deprecated	`boolean`	`true`	Shows the clear button while a value is selected. Deprecated: Use `clearable` — removed in 1.0 (ADR-0056 D3).
`showCheckboxes`	`boolean`	`false`	In `multiple` mode, draws a checkbox in front of each option. Visual only — selection state is still carried by `aria-selected` on the option.
`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 \| null`	`null`	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`).
`ariaLabelledBy`deprecated	`string \| null`	`null`	Alias for . When both are set, `ariaLabelledby` wins. Deprecated: Use `ariaLabelledby` — removed in 1.0 (ADR-0056 D6).
`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.
`value`	`SenseSelectValue \| SenseSelectValue[] \| null`	`null`	Selected value — an array when `multiple`, otherwise a single value or `null`. Two-way bindable via `[(value)]` or forms CVA. Its `valueChange` is the canonical change event (ADR-0056 D1/D2).

Outputs
Output	Type	Description
`selectionChange`	`SenseSelectChangeEvent`	Emitted when the user changes the selection or clears the value.
`cleared`	`void`	Emitted when the user clears the value with the clear button (after `selectionChange`).
`selectFocus`	`FocusEvent`	Emitted when the combobox element receives focus.
`selectBlur`	`FocusEvent`	Emitted when the combobox element loses focus.

The combobox element inside the host (the filter input when searchable) carries aria-expanded, aria-controls and aria-activedescendant.
Groups render as role="group" named by their heading via aria-labelledby; arrow keys move between options and never land on a heading.
Row checkboxes are decoration (aria-hidden); aria-selected carries the state.
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.

Overview

Groups, filtering and checkboxes

API

Accessibility