ArtificialSenseDocs

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.

Inputs
InputTypeDefaultDescription
optionsSenseSelectOption[][] Label/value options rendered in the listbox.
sizeSenseSelectSize'md' Trigger control scale token.
variantSenseSurfaceVariant'outlined' Field chrome: `outlined` (default), `filled`, or `ghost`.
multiplebooleanfalse Allow multiple selections; the CVA value becomes an array.
searchablebooleanfalse Turns the control into a filter field; typing narrows the listbox.
placeholderstring'' Placeholder shown on the trigger when nothing is selected.
disabledbooleanfalse Disables interaction and dims the control.
loadingbooleanfalse Shows a busy indicator and suppresses interaction while options load.
labelstring'' Visible label text.
hintstring | nullnull Supporting hint rendered below the label and wired via `aria-describedby`.
errorstring | nullnull Validation error message; sets `aria-invalid` and a live alert region.
ariaLabelstring | nullnull Accessible name override when no visible `label` is provided.
ariaLabelledBystring | nullnull `id` of an external element labelling the control (`aria-labelledby`).
invalidbooleanfalse Marks the control invalid for ARIA and error styling (use with or without `error`).
requiredbooleanfalse Marks the control required for validation and ARIA.
autofocusbooleanfalse Focuses the combobox element after the first render when true.
Outputs
OutputTypeDescription
selectionChangeSenseSelectChangeEventEmitted when the user changes the selection or clears the value.
selectFocusFocusEventEmitted when the combobox element receives focus.
selectBlurFocusEventEmitted when the combobox element loses focus.

Accessibility

  • 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.