Floating label
A single-choice menu with a preselected value and a disabled option.
Custom Bootstrap Select Component Demos
Download Back To CSSScript.Com
Explore single and multiple selection, live search, rich option content, grouped choices, field states, sizing, and runtime controls.
01 / Essentials
Everyday selection
Core field treatments for standard forms, compact controls, and prominent choices.
Outline label
A crisp outlined field suited to dense interfaces.
Compact size
A smaller control for utility areas and concise forms.
Large size
A larger field for a primary selection step.
02 / Discovery
Search and rich options
Filter diacritic-aware labels and scan supporting details, icons, flags, and remote images.
Searchable menu
Try “sao” to match São Paulo or search by any city name.
Icons, flags, and images
Options can combine custom icon classes, comments, and CDN-hosted imagery.
03 / Multiple
Lists and groups
Select several values, toggle the full list, or select an entire option group at once.
Grouped multi-select
The checkbox beside the field toggles all available values. Group labels control their own children.
Selected values
figma, vscode
04 / States
Field states
Compare disabled, read-only, plaintext, and initially expanded presentations.
Disabled
The value remains visible while all interaction is unavailable.
Read-only
The value stays visually active but the menu cannot be opened.
Plaintext
A lower-emphasis field treatment for quiet form rows.
Initially expanded
The class API can render the option list open on creation.
05 / Runtime controls
Method workbench
Change the live component with sorting, insertion, removal, value, disabled, and read-only methods.
Editable dataset
Each control acts on the same multi-select. The result area reports the current state.
Live result
Selected: cork, steel