Native select
The browser's own select, styled by the skin. Best for long, familiar lists and on phones, where it opens the system picker.
Installation
Set up Camaleo once (Installation), then import what you need.
import { NativeSelect, Label } from "@camaleo/react";Anatomy
A wrapper around a real <select> and a chevron. The options are plain <option> and <optgroup> elements.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Emails and invoices are sent in this language.
With a description
Inside a Field, FieldDescription is linked to the select, so it is read after the label.
Placeholder option
An empty, disabled first option plus required makes people choose, instead of keeping a guess you made for them.
Option groups
<optgroup> splits a long list into labeled sections, and screen readers announce the group name.
Long list
Eighty years fit fine: people type "19" to jump, and phones open their own scroll wheel.
One payment · total $1,200.00
Installments
Pick a number. A controlled value updates the summary, and aria-live reads the new amount.
Set by your billing country. Contact support to change it.
Disabled, with a reason
A disabled select can't be focused, so put the reason in visible text right next to it.
Required, with an error
Choose a method and the error goes away. Field invalid marks the select and links the FieldError to it.
Inline
In a toolbar, style={{ width: "auto" }} lets it hug its longest option next to its label.
In context
These are whole pieces of UI you can copy, in the skin you picked.
1–25 of 312
Delivery
Guidelines
Countries, states, years: people scan or type to find them.
Two options hidden behind a click. Use a Switch, a Checkbox or a RadioGroup.
For answers that matter, "Choose a reason…" makes people pick one.
People skip it, and you collect your own default as if it were their answer.
Props
NativeSelect takes every attribute of <select>. These are the ones you use most:
"country" or "address-level1".value, controlled or not.event.target.value.value, controlled or not.className and style go to the wrapper <span>, so you can size it; every other attribute goes to the <select>.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the select itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
/* a borderless select inside a table toolbar */
.toolbar [data-slot="native-select"] > select {
--cml-border-control: transparent;
}Accessibility
- It is the browser's own select, so screen readers, voice control and phones all know it.
- Inside a Field, the label, description and error are linked to the select; outside one, name it with Label htmlFor.
- The chevron is decorative and hidden from assistive tech.
- required uses native validation: the form won't submit and the browser explains why.