Forms
Select
A select element is used to allow users to choose a single value from a predefined list of options.
Basic example
Default
Basic select example.
Type
Default
The `<select>` element's customization options are primarily confined to its initial appearance. Due to browser constraints, modifications to the appearance of `<option>` elements within the dropdown are not possible.
Floating label
The `label` remains in its floated position at all times, unlike with `input` elements. Pair `select-floating` with your `select` element and `select-floating-label` for the label.
Size
Default
Add responsive class `select-{size}` where `{size} = xs|sm|md|lg|xl` for select of different sizes.
Floating label
Add responsive class `select-{size}` where `{size} = xs|sm|md|lg|xl` for select of different sizes.
Select group
Leading icons
Add a leading icon inside select. There are no tailing icons for select
Validation states
Success state
Success state which can be added by using class `is-valid`.
Error state
Error state can be added using class `is-invalid`.
Shape
Pilled select
Use the `rounded-full` utility class to make select's circular. The default shape of the select but can be altered by using TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a>.
Illustrations
Label and helper text
Use the `label-text` for the main label and `helper-text` class for helper text.
Hidden label
`label` elements hidden using the `.sr-only` class.
Disabled
Disable a `select` element by adding the `disabled` attribute, making it non-selectable.
Datalist
Associate a `datalist` element with an `input` to provide a list of suggested options, allowing users to select from predefined choices or enter a custom value.
Multiple
Enable the selection of multiple options in a `select` element by adding the `multiple` attribute.
Optgroup
Utilize the `optgroup` element to group `option` elements together within a `select` dropdown, creating organized sections.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
select | component | Basic select field. |
select-floating | component | Floating select field. |
select-floating-label | part | Floats the label to the top. |
label-text | part | For label. |
helper-text | part | For helper text. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
select-xs | size | Extra small select size. |
select-sm | size | Smaller select size. |
select-md | size | Medium(default) select size. |
select-lg | size | Larger select size. |
select-xl | size | Extra large select size. |