Skip to content

Select: add an options-driven convenience API for the single-select case #851

Description

@ravisuhag

Summary

Select only ships a fully-compound API (Select + Select.Trigger / Select.Value / Select.Content / Select.Group / Select.Label / Select.Item) plus a multiple union. The overwhelmingly common case is a single-select driven by a list of options — "here are the choices, here's the value, tell me when it changes." Every such call site has to hand-assemble the compound tree, which is a lot of boilerplate for the 90% case.

What every consumer ends up writing

To render one single-select, a consumer writes the trigger, the value (with placeholder + selected-label logic), the content, and maps options to items — then repeats it everywhere. We wrap it once into an options-driven component so call sites can say what to choose instead of how to render the menu:

<Select
  value={value}
  onValueChange={onChange}
  placeholder="Pick one"
  options={[
    { value: 'a', label: 'Apple', leadingIcon: <AppleIcon /> },
    { value: 'b', label: 'Banana' },
  ]}
/>

...plus a groups variant for headings, and searchable for the in-dropdown filter. It's a thin wrapper, but it's one that essentially every Apsara consumer needs and rebuilds independently.

Request

Add an options-driven convenience API for the single-select case, either as props on Select or as a small dedicated component. Ideally it accepts:

  • options (flat) or groups (with headings)
  • per-option label, value, disabled, optional leadingIcon
  • placeholder, value / onValueChange
  • searchable (wires the existing autocomplete/search-in-content)

The compound API stays for advanced layouts; this is purely additive sugar for the common path. It would also give the single-select case a cleaner type than the current multiple discriminated union, which a single-select consumer has to narrow around.

Willing to contribute

Happy to open a PR if you'd like this in-library rather than re-wrapped per consumer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions