NativeSelect

Styled wrapper around a real native <select>, so it stays controlled and accessible through standard select props (value/defaultValue/onChange) and keeps the platform's keyboard and mobile picker behaviour.

Usage

import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@instruments/materia-ui/components/native-select";

Best practices

NativeSelect wraps a real <select> - use standard value/defaultValue/onChange and NativeSelectOption/NativeSelectOptGroup children, not Select parts.
Reach for NativeSelect when the native mobile picker and zero-JS behaviour matter; use Select when you need custom-rendered option content or styling.
It has no built-in label - associate a Label via htmlFor/id for an accessible name.

Props

Also exports

componentNativeSelect
componentNativeSelectOptGroup
componentNativeSelectOption

Composition

Builds on

Icon