mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
104 lines
3.0 KiB
Plaintext
104 lines
3.0 KiB
Plaintext
# Native Select
|
|
|
|
<Preview>
|
|
<select class="select w-[180px]" aria-label="Fruit">
|
|
<option value="">Select a fruit</option>
|
|
<option value="apple">Apple</option>
|
|
<option value="banana">Banana</option>
|
|
<option value="blueberry">Blueberry</option>
|
|
<option value="pineapple">Pineapple</option>
|
|
</select>
|
|
</Preview>
|
|
|
|
For a custom listbox with richer styling and JavaScript behavior, see [Select](/components/select).
|
|
|
|
## Usage
|
|
|
|
Add `select` to a native `<select>`. Use standard `<option>` and `<optgroup>` elements.
|
|
|
|
```html
|
|
<select class="select w-[180px]" aria-label="Fruit">
|
|
<option value="">Select a fruit</option>
|
|
<option value="apple">Apple</option>
|
|
<option value="banana">Banana</option>
|
|
<option value="blueberry">Blueberry</option>
|
|
<option value="pineapple">Pineapple</option>
|
|
</select>
|
|
```
|
|
|
|
Use **Native Select** for native browser behavior, form integration, and mobile-optimized pickers. Use [Select](/components/select/) for custom option content, multi-select behavior, or JavaScript APIs.
|
|
|
|
## Examples
|
|
|
|
### Groups
|
|
|
|
<Preview>
|
|
<select class="select w-[220px]" aria-label="Food">
|
|
<option value="">Select food</option>
|
|
<optgroup label="Fruits">
|
|
<option value="apple">Apple</option>
|
|
<option value="banana">Banana</option>
|
|
<option value="blueberry">Blueberry</option>
|
|
</optgroup>
|
|
<optgroup label="Vegetables">
|
|
<option value="carrot">Carrot</option>
|
|
<option value="potato">Potato</option>
|
|
<option value="tomato">Tomato</option>
|
|
</optgroup>
|
|
</select>
|
|
</Preview>
|
|
|
|
### Disabled
|
|
|
|
<Preview>
|
|
<select class="select w-[220px]" aria-label="Fruit" disabled>
|
|
<option value="">Select a fruit</option>
|
|
<option value="apple">Apple</option>
|
|
<option value="banana">Banana</option>
|
|
</select>
|
|
</Preview>
|
|
|
|
### Invalid
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<div role="group" class="field" data-invalid="true">
|
|
<label for="native-select-invalid">Fruit</label>
|
|
<select id="native-select-invalid" class="select w-full" aria-invalid="true" aria-describedby="native-select-invalid-error">
|
|
<option value="">Select a fruit</option>
|
|
<option value="apple">Apple</option>
|
|
<option value="banana">Banana</option>
|
|
</select>
|
|
<p id="native-select-invalid-error" class="field-error">Select a fruit to continue.</p>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Size
|
|
|
|
<Preview>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<select class="select w-[180px]" aria-label="Default size">
|
|
<option>Default</option>
|
|
<option>Apple</option>
|
|
<option>Banana</option>
|
|
</select>
|
|
<select class="select w-[180px]" data-size="sm" aria-label="Small size">
|
|
<option>Small</option>
|
|
<option>Apple</option>
|
|
<option>Banana</option>
|
|
</select>
|
|
</div>
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
Set `dir="rtl"` on the select or a parent element.
|
|
|
|
<Preview>
|
|
<select dir="rtl" class="select w-[220px]" aria-label="الفاكهة">
|
|
<option value="">اختر فاكهة</option>
|
|
<option value="apple">تفاح</option>
|
|
<option value="banana">موز</option>
|
|
<option value="blueberry">توت</option>
|
|
</select>
|
|
</Preview>
|