DocsDocsSDKs

Select

React SDK guidance for Select.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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.

Start with the root, trigger, value, and content

Most use cases only need Select, SelectTrigger, SelectValue, SelectContent, and SelectItem. Add groups, labels, and separators when the option list needs more structure.

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.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Select.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Select

# Select > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/select](https://sdk.enad.io/components/base-ui/select). ## 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. > **Start with the root, trigger, value, and content** > > Most use cases only need `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, and > `SelectItem`. Add groups, labels, and separators when the option list needs more structure. ## 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. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Select. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes