Flexi Select

Lightweight, customizable Angular select component with search, infinite scroll, single/multiple selection and full keyboard & ARIA support.

---

Live Demo

Features

• 🔍 Built-in search/filter
• ✅ Single & multiple select modes
• 📜 Infinite scroll / lazy load (itemsPerPage, clientHeight)
• 🎨 Theme support (themeClass='light' | 'dark')
• 🔧 Full customization through inputs & CSS variables
• ⚙️ Angular Forms & ngModel integration
• ♿️ ARIA roles & keyboard navigation

---

Installation

npm install flexi-select

---

Usage

1. Import

Standalone (recommended)

import { bootstrapApplication } from '@angular/platform-browser';
import { FlexiSelectModule } from 'flexi-select';

bootstrapApplication(AppComponent, {
  imports: [FlexiSelectModule]
});

NgModule

import { NgModule } from '@angular/core';
import { FlexiSelectModule } from 'flexi-select';

@NgModule({
  imports: [FlexiSelectModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

---

2. Basic Single Select

<flexi-select
  [data]='users'
  [loading]='loading'
  value='id'
  label='name'
  (selected)='onUserSelected($event)'>
</flexi-select>

• data: array of items (object[])
• value: property key for option value
• label: property key for display text
• (selected): emits the selected value

<flexi-select
  [data]='users'
  [loading]='loading'
  (selected)='onUserSelected($event)'>
</flexi-select>

• data: array of items (string[], number[], boolean[] etc.)
• (selected): emits the selected value

---

3. Multiple Select

<flexi-select
  [data]='tags'
  [loading]='loading'
  value='tagId'
  label='tagName'
  [multiple]='true'
  [closeAfterSelect]='false'
  (selected)='onTagsSelected($event)'>
</flexi-select>

• [multiple]: enable multi-select
• [closeAfterSelect]: keep dropdown open on each pick

---

4. Using <flexi-option>

<flexi-select
  value='code'
  label='viewValue'
  (selected)='onCodeSelected($event)'>
  <flexi-option value='A1'>Option A1</flexi-option>
  <flexi-option value='B2'>Option B2</flexi-option>
  <flexi-option value='C3'>Option C3</flexi-option>
</flexi-select>

Child <flexi-option> elements auto-generate the data array.

---

5. Angular Forms

Template-driven:

<flexi-select
  [data]='cities'
  [loading]='loading'
  value='id'
  label='name'
  [(ngModel)]='selectedId'
  name='selectedId'
  >
</flexi-select>

Reactive Forms:

In component:

form = new FormGroup({
  country: new FormControl(null)
});

In template:

<flexi-select
  [data]='countries'
  [loading]='loading'
  value='iso'
  label='name'
  formControlName='country'
  name='country'
  >
</flexi-select>

Disabled State

<flexi-select
  [data]='users'
  [loading]='loading'
  value='id'
  label='name'
  [disabled]='true'>
</flexi-select>

• [disabled]: Makes the select non-interactive with visual styling
• Automatically handles cursor, focus, and click events
• Supports both light and dark themes

---

Form Validation

Basic Required Validation

<form [formGroup]='myForm'>
  <flexi-select
    [data]='countries'
    [loading]='loading'
    formControlName='country'
    value='id'
    label='name'
    [required]='true'
    [showValidationErrors]='true'
    [customValidationMessage]='"Please select a country"'>
  </flexi-select>
</form>

Multiple Selection with Min/Max Validation

<flexi-select
  [data]='cities'
  [loading]='loading'
  formControlName='cities'
  value='id'
  label='name'
  [multiple]='true'
  [required]='true'
  [minSelections]='2'
  [maxSelections]='5'
  [showValidationErrors]='true'
  language='en'>
</flexi-select>

Validation features:

• Required field validation
• Min/max selections for multiple mode
• Custom validation messages
• Built-in error display with proper ARIA attributes
• Multi-language support (tr, en, bg)
• Visual feedback with red borders and validation states

---

Additional Inputs (Validation & State)

Input	Type	Default	Description
disabled	boolean	false	Disable the select component
required	boolean	false	Mark field as required for validation
minSelections	number	0	Minimum selections (multiple mode only)
maxSelections	number	Infinity	Maximum selections (multiple mode only)
showValidationErrors	boolean	true	Display validation error messages
customValidationMessage	string	""	Custom required field error message

Inputs & Outputs

Input	Type	Default	Description
data	any[]	[]	Options data
value	string	—	Key for option value
label	string	—	Key for option display text
fontSize	string	13px	Font size for all text
multiple	boolean	false	Enable multiple selection
closeAfterSelect	boolean	false	Close on each select in multi-mode
itemsPerPage	number	30	Page size for infinite scroll
clientHeight	number	180	Scrollable list height (px)
height	string	100%	Height of the main select box
tabindex	number	0	tabindex for focus
themeClass	'light' | 'dark'	'light'	Theme via CSS variable
language	'tr' | 'en' | 'bg'	'en'	Locale for search lower-casing
name	string	auto-gen	Unique name/id for ARIA & forms
loading	boolean	false	loading

Output	Type	Description
selected	any | any[]	Emits single value or array of values

---

CSS Customization

:root {
  --flexi-select-background-color: '#fff';
  --flexi-select-text-color: '#000';
  --flexi-select-active-background-color: '#ebf5ff';
  --flexi-select-active-text-color: '#212529';
  --flexi-select-border-color: '#dee2e6';
  --flexi-select-input-border-color: '#dee2e6';
  --flexi-success: '#47D764';
  --flexi-select-multiple-value-text: '#212529';
}

Toggle dark mode:

<flexi-select themeClass='dark'></flexi-select>

---

Accessibility & Keyboard

• role='combobox' with proper aria-expanded, aria-owns, aria-controls
• Type‐to‐search, arrow navigation, Enter to select, Esc to close
• Click outside to close (via @HostListener('document:click'))

---

License

MIT © Taner Saydam / Flexi UI

Crafted with ❤ for easy, flexible selects in Angular.