{"id":28712736,"url":"https://github.com/flexiui-labs/flexi-select","last_synced_at":"2026-04-02T01:57:10.842Z","repository":{"id":299125524,"uuid":"1002148981","full_name":"FlexiUI-labs/flexi-select","owner":"FlexiUI-labs","description":"Lightweight, customizable Angular select component with search, infinite scroll, single/multiple selection and full keyboard \u0026 ARIA support.","archived":false,"fork":false,"pushed_at":"2025-06-14T20:30:55.000Z","size":0,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-14T20:43:56.672Z","etag":null,"topics":["angular","multiselect","select","select2"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/stackblitz-starters-c3dvmx7v?file=src%2Fmain.ts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FlexiUI-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-14T20:24:48.000Z","updated_at":"2025-06-14T20:31:01.000Z","dependencies_parsed_at":"2025-06-14T20:44:08.431Z","dependency_job_id":"742977a0-0c97-413c-ba9d-43368ad3e98b","html_url":"https://github.com/FlexiUI-labs/flexi-select","commit_stats":null,"previous_names":["flexiui-labs/flexi-select"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/FlexiUI-labs/flexi-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlexiUI-labs","download_url":"https://codeload.github.com/FlexiUI-labs/flexi-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlexiUI-labs%2Fflexi-select/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260269312,"owners_count":22983638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","multiselect","select","select2"],"created_at":"2025-06-14T23:43:04.650Z","updated_at":"2026-04-02T01:57:10.834Z","avatar_url":"https://github.com/FlexiUI-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flexi Select\n\nLightweight, customizable Angular select component with search, infinite scroll, single/multiple selection and full keyboard \u0026 ARIA support.\n\n---\n\n## Live Demo\n\n[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://stackblitz.com/edit/stackblitz-starters-c3dvmx7v?file=src%2Fmain.ts)\n\n## Features\n\n- 🔍 Built-in search/filter\n- ✅ Single \u0026 multiple select modes\n- 📜 Infinite scroll / lazy load (`itemsPerPage`, `clientHeight`)\n- 🎨 Theme support (`themeClass='light' | 'dark'`)\n- 🔧 Full customization through inputs \u0026 CSS variables\n- ⚙️ Angular Forms \u0026 `ngModel` integration\n- ♿️ ARIA roles \u0026 keyboard navigation\n\n---\n\n## Installation\n\n```bash\nnpm install flexi-select\n```\n\n---\n\n## Usage\n\n### 1. Import\n\n\u003cdetails\u003e\n\u003csummary\u003eStandalone (recommended)\u003c/summary\u003e\n\n```ts\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { FlexiSelectModule } from 'flexi-select';\n\nbootstrapApplication(AppComponent, {\n  imports: [FlexiSelectModule]\n});\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNgModule\u003c/summary\u003e\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { FlexiSelectModule } from 'flexi-select';\n\n@NgModule({\n  imports: [FlexiSelectModule],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\u003c/details\u003e\n\n---\n\n### 2. Basic Single Select\n\n```html\n\u003cflexi-select\n  [data]='users'\n  [loading]='loading'\n  value='id'\n  label='name'\n  (selected)='onUserSelected($event)'\u003e\n\u003c/flexi-select\u003e\n```\n- `data`: array of items (object[])\n- `value`: property key for option value\n- `label`: property key for display text\n- `(selected)`: emits the selected `value`\n\n```html\n\u003cflexi-select\n  [data]='users'\n  [loading]='loading'\n  (selected)='onUserSelected($event)'\u003e\n\u003c/flexi-select\u003e\n```\n- `data`: array of items (string[], number[], boolean[] etc.)\n- `(selected)`: emits the selected `value`\n\n---\n\n### 3. Multiple Select\n\n```html\n\u003cflexi-select\n  [data]='tags'\n  [loading]='loading'\n  value='tagId'\n  label='tagName'\n  [multiple]='true'\n  [closeAfterSelect]='false'\n  (selected)='onTagsSelected($event)'\u003e\n\u003c/flexi-select\u003e\n```\n\n- `[multiple]`: enable multi-select\n- `[closeAfterSelect]`: keep dropdown open on each pick\n\n---\n\n### 4. Using `\u003cflexi-option\u003e`\n\n```html\n\u003cflexi-select\n  value='code'\n  label='viewValue'\n  (selected)='onCodeSelected($event)'\u003e\n  \u003cflexi-option value='A1'\u003eOption A1\u003c/flexi-option\u003e\n  \u003cflexi-option value='B2'\u003eOption B2\u003c/flexi-option\u003e\n  \u003cflexi-option value='C3'\u003eOption C3\u003c/flexi-option\u003e\n\u003c/flexi-select\u003e\n```\n\nChild `\u003cflexi-option\u003e` elements auto-generate the `data` array.\n\n---\n\n### 5. Angular Forms\n\n**Template-driven:**\n\n```html\n\u003cflexi-select\n  [data]='cities'\n  [loading]='loading'\n  value='id'\n  label='name'\n  [(ngModel)]='selectedId'\n  name='selectedId'\n  \u003e\n\u003c/flexi-select\u003e\n```\n\n**Reactive Forms:**\n\n_In component:_\n\n```bash\nform = new FormGroup({\n  country: new FormControl(null)\n});\n```\n\n_In template:_\n\n```html\n\u003cflexi-select\n  [data]='countries'\n  [loading]='loading'\n  value='iso'\n  label='name'\n  formControlName='country'\n  name='country'\n  \u003e\n\u003c/flexi-select\u003e\n```\n\n## Disabled State\n\n```html\n\u003cflexi-select\n  [data]='users'\n  [loading]='loading'\n  value='id'\n  label='name'\n  [disabled]='true'\u003e\n\u003c/flexi-select\u003e\n```\n\n- `[disabled]`: Makes the select non-interactive with visual styling\n- Automatically handles cursor, focus, and click events\n- Supports both light and dark themes\n\n---\n\n## Form Validation\n\n### Basic Required Validation\n\n```html\n\u003cform [formGroup]='myForm'\u003e\n  \u003cflexi-select\n    [data]='countries'\n    [loading]='loading'\n    formControlName='country'\n    value='id'\n    label='name'\n    [required]='true'\n    [showValidationErrors]='true'\n    [customValidationMessage]='\"Please select a country\"'\u003e\n  \u003c/flexi-select\u003e\n\u003c/form\u003e\n```\n\n### Multiple Selection with Min/Max Validation\n\n```html\n\u003cflexi-select\n  [data]='cities'\n  [loading]='loading'\n  formControlName='cities'\n  value='id'\n  label='name'\n  [multiple]='true'\n  [required]='true'\n  [minSelections]='2'\n  [maxSelections]='5'\n  [showValidationErrors]='true'\n  language='en'\u003e\n\u003c/flexi-select\u003e\n```\n\n**Validation features:**\n- Required field validation\n- Min/max selections for multiple mode\n- Custom validation messages\n- Built-in error display with proper ARIA attributes\n- Multi-language support (tr, en, bg)\n- Visual feedback with red borders and validation states\n\n---\n\n## Additional Inputs (Validation \u0026 State)\n\n| Input                      | Type      | Default     | Description                                    |\n|----------------------------|-----------|-------------|------------------------------------------------|\n| `disabled`                 | `boolean` | `false`     | Disable the select component                   |\n| `required`                 | `boolean` | `false`     | Mark field as required for validation          |\n| `minSelections`            | `number`  | `0`         | Minimum selections (multiple mode only)        |\n| `maxSelections`            | `number`  | `Infinity`  | Maximum selections (multiple mode only)        |\n| `showValidationErrors`     | `boolean` | `true`      | Display validation error messages              |\n| `customValidationMessage`  | `string`  | `\"\"`        | Custom required field error message            |\n\n## Inputs \u0026 Outputs\n\n| Input                  | Type                       | Default    | Description                                 |\n|------------------------|----------------------------|------------|---------------------------------------------|\n| `data`                 | `any[]`                    | `[]`       | Options data                                |\n| `value`                | `string`                   | —          | Key for option value                        |\n| `label`                | `string`                   | —          | Key for option display text                 |\n| `fontSize`             | `string`                   | `13px`     | Font size for all text                      |\n| `multiple`             | `boolean`                  | `false`    | Enable multiple selection                   |\n| `closeAfterSelect`     | `boolean`                  | `false`    | Close on each select in multi-mode          |\n| `itemsPerPage`         | `number`                   | `30`       | Page size for infinite scroll               |\n| `clientHeight`         | `number`                   | `180`      | Scrollable list height (px)                 |\n| `height`               | `string`                   | `100%`     | Height of the main select box               |\n| `tabindex`             | `number`                   | `0`        | `tabindex` for focus                        |\n| `themeClass`           | `'light' \\| 'dark'`        | `'light'`  | Theme via CSS variable                      |\n| `language`             | `'tr' \\| 'en' \\| 'bg'`     | `'en'`     | Locale for search lower-casing              |\n| `name`                 | `string`                   | auto-gen   | Unique name/id for ARIA \u0026 forms             |\n| `loading`              | `boolean`                  | `false`    | loading                                     |\n\n\n| Output                 | Type                       | Description                                 |\n|------------------------|----------------------------|---------------------------------------------|\n| `selected`             | `any \\| any[]`             | Emits single `value` or array of values     |\n\n---\n\n## CSS Customization\n\n```css\n:root {\n  --flexi-select-background-color: '#fff';\n  --flexi-select-text-color: '#000';\n  --flexi-select-active-background-color: '#ebf5ff';\n  --flexi-select-active-text-color: '#212529';\n  --flexi-select-border-color: '#dee2e6';\n  --flexi-select-input-border-color: '#dee2e6';\n  --flexi-success: '#47D764';\n  --flexi-select-multiple-value-text: '#212529';\n}\n```\nToggle dark mode:\n\n```html\n\u003cflexi-select themeClass='dark'\u003e\u003c/flexi-select\u003e\n```\n\n---\n\n## Accessibility \u0026 Keyboard\n\n- `role='combobox'` with proper `aria-expanded`, `aria-owns`, `aria-controls`\n- Type‐to‐search, arrow navigation, `Enter` to select, `Esc` to close\n- Click outside to close (via `@HostListener('document:click')`)\n\n---\n\n## License\n\nMIT © Taner Saydam / Flexi UI\n\n\u003e Crafted with ❤ for easy, flexible selects in Angular.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexiui-labs%2Fflexi-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexiui-labs%2Fflexi-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexiui-labs%2Fflexi-select/lists"}