Tailwind CSS Select
Use native select menus to let users choose one or multiple options from a list, with Tailwind CSS styles for labels, sizes, shapes, disabled states, and validation feedback.
Heads up!
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it! For searchable dropdowns, tagging, remote data, multiple selection, and JavaScript methods, use the Tailwind CSS advanced select.
Default select
Use the native <select> element for a standard single-choice menu while keeping the browser-provided option list behavior.
Filled select
Use a filled surface style for a softer select appearance without a strong border.
Floating label
Floating labels stay in their raised position on selects, and this pattern does not support sized or multiple selects.
Select sizes
Scale the select from compact to large sizes to match different form layouts.
Select with label
Pair the select with a visible label to provide clear context in a form.
Visually hidden label
Hide the <label> visually with .sr-only while keeping it available to assistive technologies.
Validation states
Show valid and invalid states to give clear feedback when a selection is required in a form.