Select
A form input component that creates a dropdown select element with support for single or multiple selections, option groups, and custom styling.Basic Select
Creates a standard select element with options.
Options
The Select component supports various configuration options.placeholder: Optional placeholder text for the select elementmultiple: Whether to allow multiple selectionsselected: The currently selected valueoptions: Array or closure for defining select optionsdivClass: Additional CSS classes for the container divselectClasses: Default Bootstrap classes for the select element
Select Examples
Here are examples of different ways to use the select component.Select with Placeholder
Creates a select element with placeholder text.
Multiple Select
Creates a select element that allows multiple selections.
Select with Option Groups
Creates a select element with grouped options.
Select with Selected Value
Creates a select element with a pre-selected option.
API
The select component extends fromHtmlElement so it has all its methods available.Common alternative names: Dropdown, Select Box, Combo Box, Option List, Choice List
Types: Single Select, Multiple Select, Grouped Select
Principles
User Experience
Select elements provide a compact way to present multiple options while maintaining a clean interface.
Accessibility
Properly structured select elements ensure keyboard navigation and screen reader compatibility.
Flexibility
Select components can be customized with various options and styling to suit different needs.
Anatomy
- Container
- Select Element
- Options
- Option Groups
- Placeholder
- Label
Outer wrapper div
The actual select input
Individual option elements
Grouped sets of options
Optional placeholder text
Optional label element
Usage
Use select elements for:
- Form inputs with predefined options
- Category selection
- Status selection
- Filter controls
- Configuration settings