Combobox
A text input with a filtered list of options, built only from the `field`, `popup` and `menu` families: the second recombination test.
npx shadcn@latest add @fragiola/comboboxRecombination
The input is a field control — field.row provides the box (border, background, focus ring); the input carries the field-control marker so the row's outline fires on focus. The trigger and clear buttons are Clickable.Button. The content is popup.content. Items are menu.selectableItem. The item indicator is menu.itemIndicator. Group labels are menu.label. Separators are menu.separator.
The component declares no new style: every class comes from a family. If this file contained a class that did not come from a family, the recombination claim would be wrong. It does not.
Parts
| Part | Source |
|---|---|
Root | Base UI Combobox.Root |
InputGroup | field.row() + layout |
Input | field-control marker + layout |
Trigger / Clear | Clickable.Button |
Content | popup.content() |
Item | menu.selectableItem() |
ItemIndicator | menu.itemIndicator() |
GroupLabel | menu.label() |
Separator | menu.separator() |
Select
The recombination test. `Select` is `field` + `popup` + `menu` — and it declares no new style. Every class comes from a family.
Dropdown Menu
A menu of actions opened by a button. It shares the `popup` and `menu` families with context-menu, select and combobox, adding its own parts and positioning.