Advanced input box – choices.js Optional
External component. Highly confirgurable replacement for select box and text input. Demo of original component: https://choices-js.github.io/Choices/
Features
- Enhanced UI for multiple select box (
<select multiple>). - Enhanced UI for text box (
<input type="text">). - Make options searchable.
- Displays comma separated strings as multiple options.
- Shows help text.
- Limit inputs to a number of options.
- Theme styles, like basic form elements.
- Can have an icon label and/or icon link, like basic form elements.
- Supports validation.
- …and more. See all features: https://github.com/Choices-js/Choices
Configuration
- Include the component css file in the Html:
<link href="https://cdn.jsdelivr.net/npm/choices.js@10.2.0/public/assets/styles/choices.min.css" rel="stylesheet" /> - Include the theme css file in the Html:
<link href="/css/components/choices.min.css" rel="stylesheet" /> - Include the component javascript file in the Html:
<script src="https://cdn.jsdelivr.net/npm/choices.js@10.2.0/public/assets/scripts/choices.min.js"></script> - Configure according to the documentation: https://github.com/Choices-js/Choices
Examples
Multiple select:
The components width is always 100% of the parent element.
Multiple select with limited width:
Multiple select with icon label:
Multiple select with icon link:
Multiple select with icon label and icon link:
Tag list (comma separated strings):
Tag list, only unique values:
Tag list, only unique values, max 3 values, remove buttons, other language (Swedish):
Tag list with validation [Required]: