Native Select

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Native Select component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/native-select.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your native select HTML

Add class="select" to a native <select>. Use standard <option> and <optgroup> elements.

<select class="select" 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 for custom option content, multi-select behavior, or JavaScript APIs.

Examples

Groups

Disabled

Invalid

Fruit

Select a fruit to continue.

Size

RTL

Set dir="rtl" on the select or a parent element.

#Native Select

#Usage

Include CSS

Add your native select HTML

#Examples

#Groups

#Disabled

#Invalid

#Size

#RTL