Select

Package: @synapse-ui/select Selector: synapse-select Status: Stable

A dropdown select control that integrates with Angular forms via ControlValueAccessor. Supports clearable selection and closes on outside click.

Overview

Select renders a custom dropdown using listbox / option ARIA roles. It accepts a typed SelectOption[] array and dismisses automatically when the user clicks outside the component.

Installation

npm install @synapse-ui/select @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { Select, SelectOption } from '@synapse-ui/select';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Select, ReactiveFormsModule],
  template: ` <synapse-select label="Country" [options]="countries" [formControl]="countryControl" /> `,
})
export class DemoComponent {
  countries: SelectOption[] = [
    { label: 'United States', value: 'us' },
    { label: 'United Kingdom', value: 'gb' },
    { label: 'Canada', value: 'ca' },
    { label: 'Australia', value: 'au' },
  ];

  countryControl = new FormControl(null);
}

API Reference

Inputs

Input	Type	Default	Description
options	SelectOption[]	[]	The list of selectable options
placeholder	string	'Select an option...'	Text shown when nothing is selected
disabled	boolean	false	Disables the dropdown
label	string | undefined	undefined	Visible label rendered above the trigger

Outputs

Output	Payload	Description
valueChange	unknown	Emits the selected option's value (or null when cleared)

Types

interface SelectOption {
  label: string;
  value: unknown;
  disabled?: boolean;
}

Disabled Options

Individual options can be disabled while keeping the rest selectable:

options: SelectOption[] = [
  { label: 'Option A', value: 'a' },
  { label: 'Option B (unavailable)', value: 'b', disabled: true },
  { label: 'Option C', value: 'c' },
];

Template-driven Example

import { FormsModule } from '@angular/forms';
import { Select } from '@synapse-ui/select';

@Component({
  standalone: true,
  imports: [Select, FormsModule],
  template: ` <synapse-select label="Size" [options]="sizes" [(ngModel)]="selectedSize" /> `,
})
export class TemplateDemoComponent {
  sizes: SelectOption[] = [
    { label: 'Small', value: 'sm' },
    { label: 'Medium', value: 'md' },
    { label: 'Large', value: 'lg' },
  ];
  selectedSize: string | null = null;
}

Accessibility

• Trigger uses a native <button> with aria-expanded reflecting the open state.
• Dropdown renders as role="listbox" with role="option" children.
• aria-selected reflects the active selection.
• Outside-click detection via @HostListener('document:click') closes the dropdown automatically.