Selects
Selects create dropdowns for selecting a single entry from a list.
Default Select
The Default Select description from Figma goes here
1<label for="select" class="w-full block select-label">Select Label</label>
2<select id="select" class="w-full select select-option" aria-label="Default select example">
3 <option selected>Open this select menu</option>
4 <option value="1">One</option>
5 <option value="2">Two</option>
6 <option value="3">Three</option>
7</select>
Disabled Select
The Disabled Select description from Figma goes here
1<label for="select" class="w-full block select-label">Select Disabled</label>
2<select id="select" class="w-full select select-option" aria-label="Default select example" disabled>
3 <option selected>Open this select menu</option>
4 <option value="1">One</option>
5 <option value="2">Two</option>
6 <option value="3">Three</option>
7</select>Error Select
The Error Select description from Figma goes here
1<label for="select" class="w-full block select-label">Select Validation</label>
2<select id="select" class="w-full select select-option" aria-label="Default select example">
3 <option selected>Open this select menu</option>
4 <option value="1">One</option>
5 <option value="2">Two</option>
6 <option value="3">Three</option>
7</select>Accessibility
Make it clear what this select widget does for the user.
-
What to do with select
-
What not to do with select
Classes
Complete list of all CSS classes for the component.
| Name | Class |
|---|---|
| Default Select | select select-default |
| Disabled Select | select select-disabled |
| Error Select | select select-error |