Native Select

Inset-first native select for nested surfaces. Use elevation variants when the select needs to stand alone as a surface.

Animated Icon

The chevron reacts on press (active) without staying rotated just because the field is focused.

Press to see icon feedback

Default is Inset for nested layouts. Use Section / Elevated only when the select itself should act as a surface.

Inset (default)

Section (Level 2)

Elevated (Level 3)

Default

Small

Country

Language

Select a Car

Disabled Select

With Disabled Option

Avoid stacking elevations inside an already-elevated container. Let the container carry the shadow; keep inner selects inset.

❌ Double elevation

✅ Correct

NativeSelect is a styled <select> with Paper Cut sizing and elevation.

PropTypeDescription

size"sm" | "default" | "lg"Control height/padding

elevation"inset" | "section" | "elevated"Surface depth (default is inset)

wrapperClassNamestringOverride wrapper width/layout

classNamestringAdditional classes for the select