Inputs Select
Default Select
The Default Select example demonstrates how to use the .form-select
class to create a styled dropdown for selecting options easily.
Sizing
The Sizing example shows how to adjust the size of a select dropdown using Bootstrap's .form-select-lg
and .form-select-sm
classes for better UI adaptability.
Single Select
The Single Select example uses Choice.js to create a searchable dropdown. You can configure it using options like searchEnabled
, placeholderValue
, and removeItemButton
.
Option Groups
The Option Groups example organizes related options within a select
dropdown using the <optgroup>
tag, improving readability and user experience.
Default Multiple Select
The Default Multiple Select example demonstrates how to use the .form-select
class with the multiple
attribute to allow users to select multiple options from a dropdown.
Multiple Select With Close Icon
The Multiple Select With Close Icon lets users select multiple options and remove them easily with a close icon. Use removeItemButton = "true"
to enable this feature.
Multiple Select With Limit
The Multiple Select With Limit allows users to select multiple options up to a set limit. Use maxItemCount
to define the selection limit.
Multiple Select With Option Groups
The Multiple Select With Option Groups organizes choices into categories, making selection easier. Groups help users find related options quickly.
Text Inputs
The Text Inputs allow users to enter and edit text in a form using the .form-control
class for a clean and responsive design.
Unique Values Only, No Pasting
Users can enter only unique values and prevents pasting. Configure it using options like duplicateItemsAllowed: false
and paste: false
.
Email Address Only
The Email Address Only example ensures users enter a valid email format.
Use pattern
to validate input.