basecoat/docs/src/components/native-select.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Native Select	A styled native HTML select element with consistent design system integration.	label id Usage usage label id children Examples examples label id Groups example-groups label id Disabled example-disabled label id Invalid example-invalid label id Size example-size label id RTL example-rtl label id Native Select vs Select native-select-vs-select

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %}

Select a fruit Apple Banana Blueberry Pineapple {% endset %} {{ code_preview("native-select", code) }}

For a custom listbox with richer styling and JavaScript behavior, see the Select component.

Usage

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

{{ code_block(code) }}

Examples

Groups

{% set code %}

Select food Apple Banana Blueberry Carrot Potato Tomato {% endset %} {{ code_preview("native-select-groups", code) }}

Disabled

{% set code %}

Select a fruit Apple Banana {% endset %} {{ code_preview("native-select-disabled", code) }}

Invalid

{% set code %}

Fruit Select a fruit Apple Banana

Select a fruit to continue.

{% endset %} {{ code_preview("native-select-invalid", code, "w-full max-w-sm") }}

Size

{% set code %}

Default Apple Banana Small Apple Banana

{% endset %} {{ code_preview("native-select-size", code) }}

RTL

Native select supports document direction. Set dir="rtl" on the select or a parent element.

{% set code %}

اختر فاكهة تفاح موز توت {% endset %} {{ code_preview("native-select-rtl", code) }}

Native Select vs Select

• Use Native Select for native browser behavior, better performance, form integration, and mobile-optimized pickers.
• Use Select for a custom popover, richer option content, multi-select behavior, or custom JavaScript APIs.