Select
Picks one option, or a few, from a list that stays closed until needed. The popup follows the skin through the portal and opens with the keyboard as well as the pointer.
Installation
Set up Camaleo once (Installation), then import the parts you need; add SelectGroup, SelectGroupLabel and SelectSeparator for long lists. The skin you load styles the trigger and the popup.
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@camaleo/react";Anatomy
Select holds the state; the trigger shows the value; the content is a popup rendered in a portal. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
With a placeholder
Leave out defaultValue when the choice is the person's to make; SelectValue placeholder says what to pick without pretending it is a value.
Groups and separators
Past eight or so options, SelectGroup with a SelectGroupLabel lets people jump to the right section instead of reading every row.
Aligned with the trigger
alignItemWithTrigger opens the list over the trigger with the current option in place, so short lists feel like a native menu.
Arrives Nov 10–14 · $5.90
Controlled
Pick another option. With value and onValueChange the rest of the form can react, here the delivery date and price under the field.
Several values
multiple keeps the list open and returns an array; give SelectValue a function so the trigger reads "Mon, Wed, Fri" instead of a count.
XL is back on Nov 20.
Unavailable options
Disable an option rather than removing it, so people learn it exists, and say when it comes back.
Required, with an error
Inside a Field, the label names the trigger and FieldError is announced with it; say what to do, not just that it is wrong.
In context
A select is rarely alone. These are whole pieces of UI you can copy, in the skin you picked.
Filters
1–25 of 312
Guidelines
The label stays put after a value is chosen, so people always know what the field is.
Once something is picked, "Country" disappears and the field has no name on screen.
Radios cost one click and nothing is hidden.
It takes two clicks to see a choice that would fit on one line.
Props
ReactElement or a function that returns the element to render.These are the props of SelectContent. Select takes Base UI's root props: items (a record or { label, value }[], so the trigger shows the label before the popup opens), value, defaultValue, onValueChange, multiple, disabled, required, readOnly, name and open / onOpenChange. SelectItem takes value and disabled; SelectValue takes placeholder or a function of the value as children.
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
Accessibility
- Inside a Field, FieldLabel names the trigger and FieldDescription / FieldError are read after it.
- The trigger reports aria-expanded and the options carry aria-selected, so screen readers announce the state.
- The popup is portalled but keeps the skin through PortalScope, and contrast passes WCAG 2.2 AA in all 13 skins.
- For very long lists or on mobile, NativeSelect gives you the platform's own picker.