When to use it

Use Select when the surface needs a custom-styled single-choice picker that still behaves like a proper control. It works well for region pickers, material selectors, variant choices, and compact sort controls.

If the page does not need custom trigger and panel composition, a native select can still be the simpler choice.

Slot strategy

Select is a small composition system, not a single monolithic component:

• SelectTrigger defines the clickable field shell and size
• SelectValue controls placeholder and selected value rendering
• SelectContent owns the floating panel and positioning behavior
• SelectGroup, SelectLabel, SelectItem, and SelectSeparator help structure larger menus

Keep the trigger width explicit when the surrounding layout needs consistency across several selects.

Behavior and theming guidance

Use size="sm" for tight filter rows and size="md" for regular forms. Reach for position="popper" and align when the panel needs to anchor more intentionally to the trigger in denser layouts.

The component already uses the shared input tokens for radius, height, and padding, so it should feel related to Input out of the box. Prefer those shared tokens over one-off panel sizing or trigger spacing overrides.

When a brand needs tighter control over the internal icons, prefer the explicit hooks on the public parts — for example SelectTrigger.iconClassName, SelectItem.iconClassName, and SelectItem.indicatorClassName — instead of broad descendant selectors against every svg inside the select.