NetanelBasal / Nb Choices
Licence: mit
Angular wrapper for choices.js, vanilla, lightweight, configurable select box/text input plugin
Stars: ✭ 32
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Nb Choices
Ngx Select Dropdown
Custom Dropdown for Angular 4+ with multiple and single selection options
Stars: ✭ 91 (+184.38%)
Mutual labels: custom, select, dropdown, multiselect
React Selectrix
A beautiful, materialized and flexible React Select control
Stars: ✭ 166 (+418.75%)
Mutual labels: dropdown, tags, multiselect
Multiselect
Vue 3 multiselect component with single select, multiselect and tagging options.
Stars: ✭ 92 (+187.5%)
Mutual labels: select, dropdown, multiselect
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (+459.38%)
Mutual labels: select, dropdown, checkbox
Angular2 Multiselect Dropdown
Angular 2 Dropdown Multiselect
Stars: ✭ 225 (+603.13%)
Mutual labels: select, dropdown, multiselect
react-multi-select-component
Lightweight (~5KB gzipped) multiple selection dropdown component
Stars: ✭ 279 (+771.88%)
Mutual labels: select, multiselect, dropdown
Downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Stars: ✭ 10,183 (+31721.88%)
Mutual labels: select, dropdown, multiselect
Ng Select
⭐ Native angular select component
Stars: ✭ 2,781 (+8590.63%)
Mutual labels: select, dropdown, multiselect
vue-tags-component
Vue.js 2+ tags component
Stars: ✭ 27 (-15.62%)
Mutual labels: select, tags, dropdown
tagselector
Dependency-free JS library that turns select fields in customizable tag clouds
Stars: ✭ 19 (-40.62%)
Mutual labels: select, tags, dropdown
bootstrap5-tags
Replace select[multiple] with nices badges for Bootstrap 5
Stars: ✭ 58 (+81.25%)
Mutual labels: select, tags, checkbox
Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: ✭ 261 (+715.63%)
Mutual labels: dropdown, checkbox
Ngx Treeview
An Angular treeview component with checkbox
Stars: ✭ 312 (+875%)
Mutual labels: dropdown, checkbox
React Dropdown Tree Select
Lightweight, accessible, customizable and fast Dropdown Tree Select component for React
Stars: ✭ 345 (+978.13%)
Mutual labels: select, dropdown
Material Ui Superselectfield
multiselection autocomplete dropdown component for Material-UI
Stars: ✭ 260 (+712.5%)
Mutual labels: select, dropdown
Easydropdown
A lightweight library for building beautiful styleable <select> elements
Stars: ✭ 337 (+953.13%)
Mutual labels: select, dropdown
React Select Search
⚡️ Lightweight select component for React
Stars: ✭ 379 (+1084.38%)
Mutual labels: select, dropdown
Formbase
Better default styles for common input elements.
Stars: ✭ 560 (+1650%)
Mutual labels: select, checkbox
📢 Angular Choices
Angular wrapper for choices.js - vanilla, lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
Live Demo - https://stackblitz.com/edit/nb-choices
🍭 Features
- Angular forms support
- Custom Angular templates
- Placeholder support out of the box
- Works with observables and the async pipe
- Custom checkbox in multiple dropdowns
- Escaping your HTML out of the box
- Modern styling
Installation
npm install nb-choices
yarn add nb-choices
Style
@import '~nb-choices/nb-choices.scss'
Examples
Single Select
<choices [formControl]="control"
[choices]="options"
placeholder="Choose..."></choices>
Single Select - Combo box
<choices [formControl]="control"
[isCombo]="true"
[choices]="options"
placeholder="Choose..."></choices>
Single Select - Group
this.options = [{
label: 'Group one',
id: 1,
choices: [
{ value: 'Child One', label: 'Child One' },
{ value: 'Child Two', label: 'Child Two' },
]
},
{
label: 'Group two',
id: 2,
choices: [
{ value: 'Child Four', label: 'Child Three' },
{ value: 'Child Five', label: 'Child Four' },
]
}];
<choices [formControl]="control"
[choices]="options"
placeholder="Choose..."></choices>
With Custom Template
this.options = [{
value: 'chrome',
label: 'Chrome',
customProperties: {
icon: 'chrome'
}
},
{
value: 'explorer',
label: 'Explorer',
customProperties: {
icon: 'internet-explorer'
}
}];
<ng-template #tpl let-data>
<i class="fa fa-{{data.customProperties?.icon}}"></i> {{data.label}}
</ng-template>
<choices [formControl]="control"
[isCombo]="true"
[choiceTemplate]="tpl"
[choices]="options"
placeholder="Choose..."></choices>
With Observables
ngOnInit() {
this.loading = true;
this.options$ = timer(500).mapTo(this.options).do(() => {
this.loading = false
});
}
<choices [formControl]="control"
[isCombo]="true"
[loading]="loading"
[choices]="options$ | async"
placeholder="Choose..."></choices>
Multiple Select
<choices [isMultiple]="true"
[choices]="options"
[isCombo]="true"
[formControl]="control"
placeholder="Choose skills..."></choices>
Multiple Select - With Checkbox
<choices [isMultiple]="true"
[choices]="options"
[withCheckbox]="true"
[isCombo]="true"
[formControl]="control"
placeholder="Choose skills..."></choices>
Controls
<choices [formControl]="control"
[isCombo]="true"
#choices="choices"
[choices]="options"
placeholder="Choose..."></choices>
<button (click)="choices.toggleDropdown(true)">Show</button>
<button (click)="choices.toggleDropdown()">Hide</button>
<button (click)="choices.disable()">Disable</button>
<button (click)="choices.enable()">Enable</button>
<button (click)="choices.clear()">Reset</button>
<button (click)="choicesMultiple.clearMultiple()">Reset multiple select</button>
Text
<choices [text]="true" [items]="textOptions" [formControl]="controText" #choicesText="choices"></choices>
<button (click)="choicesText.clearMultiple()">Reset</button>
Configuration
The default configurations of nb-choices
for selects are:
{
placeholderValue: context.placeholder,
searchEnabled: context.isCombo,
searchPlaceholderValue: context.searchPlaceholder,
silent: true,
removeItems: true,
removeItemButton: true,
duplicateItems: false,
resetScrollPosition: false,
searchResultLimit: 10000,
fuseOptions: {
threshold: 0.2,
},
shouldSort: false,
shouldSortItems: false,
renderSelectedChoices: 'always',
loadingText: 'Loading...',
noResultsText: 'No results found',
noChoicesText: 'No choices to choose from',
itemSelectText: '',
}
The default configurations of nb-choices
for texts are:
{
duplicateItems: false,
removeItemButton: true,
}
You can extend the configurations by providing the CHOICES_CONFIG
provider for selects or the CHOICES_TEXT_CONFIG
for texts.
For example:
providers: [{provide: CHOICES_CONFIG, useValue: { removeItems: false }}]
Options
@Inputs() | Description | Default |
---|---|---|
isMultiple | Whether the select should be multiple | false |
placeholder | The value to show when the control is empty | Choose.. |
isCombo | Whether to show the search box | true |
text | Whether is a text type | false |
searchPlaceholder | The value to show on the search input | Search.. |
labelKey | The label which bound to the option text | label |
valueKey | The value which bound to the option value | value |
choices | The list of choices | [] |
items | The list of items (relevant for text) | [] |
choiceTemplate | TemplateRef that will replace the default view | null |
loadingText | The loading text | Loading.. |
textConfig | The text config | {} |
withCheckbox | Whether to show a checkbox in multiple dropdown | false |
loading | Whether to show the loading text | false |
@Outputs() | Description |
---|---|
onSearch | Triggered when a user types into an input to search choices |
Custom Styling
You can customize the style by modifying the nb-choices.scss
and include it in your application.
TODO
- Add Tests
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].