Native Select

A classic native select and the recommended picker floor.

When to use it. Use it when its native HTML meaning matches the caller-owned form requirement.

Native baseline Exact fallback

Native Select primary example

Explicit identity

Country

FormField

Account country

<.native_select field={@form[:country]} options={@options}><:label>Country</:label></.native_select>

How it works

<.native_select> Explicit identity takes precedence over FormField values. Protected identity and ARIA relationships cannot be contradicted through global attributes.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :native_select does not ship them.
application boundary Use Native Select for the dependable platform picker. Choose Enhanced Select only when its optional presentation is useful; country values, reset, and submission stay identical.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Visible labels and deterministic help and error relationships preserve the native accessible name and description contract.

Native Select support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	The native element, text, values, and document order remain usable without package CSS or JavaScript.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	The native element, text, values, and document order remain usable without package CSS or JavaScript.

Application ownership and API

The application owns changesets, translation, validation timing, submission, persistence, authorization, pending transitions, focus, and outcomes.

Choosing the related control. Use Native Select for the dependable platform picker. Choose Enhanced Select only when its optional presentation is useful; country values, reset, and submission stay identical.

Public API Package source

Provenance

Catalogue identity forms.native_select, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt native select presentation into validated HEEX option and optgroup data with deterministic field relationships and ordinary browser submission.