@synapse-ui/select

Accessible Angular custom select/dropdown with keyboard navigation and ControlValueAccessor support.

Installation

npm install @synapse-ui/select

Usage

import { Select, SelectOption } from '@synapse-ui/select';

@Component({
  imports: [Select],
  template: ` <synapse-select [options]="sizes" label="T-shirt size" (valueChange)="onSelect($event)" /> `,
})
export class MyComponent {
  sizes: SelectOption[] = [
    { label: 'Small', value: 's' },
    { label: 'Medium', value: 'm' },
    { label: 'Large', value: 'l', disabled: true },
  ];
}

Inputs

| Input | Type | Default | Description | | ------------- | --------------------- | ----------------------- | ------------------------ | | options | SelectOption[] | [] | List of selectable items | | placeholder | string | 'Select an option...' | Placeholder text | | label | string \| undefined | undefined | Associated label text | | disabled | boolean | false | Disables the control |

Outputs

| Output | Payload | Description | | ------------- | --------- | ----------------------------------- | | valueChange | unknown | Emitted when a new option is chosen |

Running unit tests

Run nx test select to execute the unit tests.