Native Select
A native HTML select element with consistent styling.
Preview
Framework
Select a framework
React
Vue
Angular
Svelte
Usage
<div class="max-w-sm space-y-2">
<ui-label>Framework</ui-label>
<ui-native-select>
<ui-native-select-option value="">Select a framework</ui-native-select-option>
<ui-native-select-option value="react">React</ui-native-select-option>
<ui-native-select-option value="vue">Vue</ui-native-select-option>
<ui-native-select-option value="angular">Angular</ui-native-select-option>
<ui-native-select-option value="svelte">Svelte</ui-native-select-option>
</ui-native-select>
</div>
Sub-components
<ui-native-select> <ui-native-select-option> <ui-native-select-opt-group>
Props
<ui-native-select>
| Prop | Type | Default | Description |
|---|
disabled | boolean | false | Whether the select is disabled. |
<ui-native-select-option>
| Prop | Type | Default | Description |
|---|
value | string | — | The option value. |
<ui-native-select-opt-group>
| Prop | Type | Default | Description |
|---|
label | string | — | The group label. |
All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.