Skip to content

Combobox vNext: slot/children structure #22331

@smhigley

Description

@smhigley

There are two possible approaches to defining the combobox trigger and listbox/options dropdown in Combobox:

1. trigger/listbox are slots, and options are children:

<Combobox trigger={<ComboboxButton />} listbox={<Listbox />}>
  <Option>first</Option>
  <Option>second</Option>
  <Option>third</Option>
</Combobox>

2. defining the trigger/listbox as discrete children:

<Combobox>
  <ComboboxButton />
  <Listbox>
    <Option>first</Option>
    <Option>second</Option>
    <Option>third</Option>
  </Listbox>
</Combobox>

Pros/cons of slot vs. child approach:

  • Options as direct children aligns with the Select component, and the way other libraries mark up combobox-like components
  • Trigger/listbox as children aligns with the Menu pattern
  • Trigger as a child is more flexible than trigger as a slot, since there are no type restrictions

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions