Select
Render accessible select fields with labels, hints, and style variants.
x-t-select
Preview and Examples
<x-t-select name="role" label="User Role" hint="Choose the default role for invited users."> <option value="">Select a role...</option> <option>Editor</option> <option>Author</option> <option>Viewer</option></x-t-select> <x-t-select name="plan" label="Plan" prefix="<i class='fa-solid fa-layer-group'></i>" variant="primary" ring shadow> <option>Starter</option> <option>Growth</option> <option>Enterprise</option></x-t-select>Attributes
| Name | Type | Options | Description |
|---|---|---|---|
| accent | boolean |
true
false
|
Adds an accent |
| border | boolean |
true
false
|
Adds a border |
| divide | boolean |
true
false
|
Adds a divide between elements |
| hint | string |
string
|
Adds helper hint text |
| hollow | boolean |
true
false
|
Removes background colour |
| label | string |
string
|
Adds a text label |
| prefix | string |
string
|
Adds content to the start |
| ring | boolean |
true
false
|
Adds a ring |
| rounded | boolean |
true
false
|
Adds rounded corners |
| shadow | boolean |
true
false
|
Adds a shadow |
| size | string |
xs
sm
md
lg
xl
2xl
|
Controls component scale |
| suffix | string |
string
|
Adds content to the end |
| variant | string |
default
brand
primary
secondary
success
warning
danger
light
dark
|
A variant is like a colour palette |