https://github.com/flexiui-labs/flexi-select
Lightweight, customizable Angular select component with search, infinite scroll, single/multiple selection and full keyboard & ARIA support.
https://github.com/flexiui-labs/flexi-select
angular multiselect select select2
Last synced: 7 months ago
JSON representation
Lightweight, customizable Angular select component with search, infinite scroll, single/multiple selection and full keyboard & ARIA support.
- Host: GitHub
- URL: https://github.com/flexiui-labs/flexi-select
- Owner: FlexiUI-labs
- Created: 2025-06-14T20:24:48.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-06-14T20:30:55.000Z (7 months ago)
- Last Synced: 2025-06-14T20:43:56.672Z (7 months ago)
- Topics: angular, multiselect, select, select2
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/stackblitz-starters-c3dvmx7v?file=src%2Fmain.ts
- Size: 0 Bytes
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flexi Select
Lightweight, customizable Angular select component with search, infinite scroll, single/multiple selection and full keyboard & ARIA support.
---
## Live Demo
[](https://stackblitz.com/edit/stackblitz-starters-c3dvmx7v?file=src%2Fmain.ts)
## 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
```bash
npm install flexi-select
```
---
## Usage
### 1. Import
Standalone (recommended)
```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { FlexiSelectModule } from 'flexi-select';
bootstrapApplication(AppComponent, {
imports: [FlexiSelectModule]
});
```
NgModule
```ts
import { NgModule } from '@angular/core';
import { FlexiSelectModule } from 'flexi-select';
@NgModule({
imports: [FlexiSelectModule],
bootstrap: [AppComponent]
})
export class AppModule {}
```
---
### 2. Basic Single Select
```html
```
- `data`: array of items
- `value`: property key for option value
- `label`: property key for display text
- `(selected)`: emits the selected `value`
---
### 3. Multiple Select
```html
```
- `[multiple]`: enable multi-select
- `[closeAfterSelect]`: keep dropdown open on each pick
---
### 4. Using ``
```html
Option A1
Option B2
Option C3
```
Child `` elements auto-generate the `data` array.
---
### 5. Angular Forms
**Template-driven:**
```html
```
**Reactive Forms:**
_In component:_
```bash
form = new FormGroup({
country: new FormControl(null)
});
```
_In template:_
```html
```
---
## Inputs & Outputs
| Input | Type | Default | Description |
|------------------------|----------------------------|------------|---------------------------------------------|
| `data` | `any[]` | `[]` | Options data |
| `value` | `string` | — | Key for option value |
| `label` | `string` | — | Key for option display 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 |
| Output | Type | Description |
|------------------------|----------------------------|---------------------------------------------|
| `selected` | `any \| any[]` | Emits single `value` or array of values |
---
## CSS Customization
```css
: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:
```html
```
---
## 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.