Dropdown

The catnip-dropdown component is a field control for choosing one or many values from a list. Shared label and supporting-text behaviour matches other field inputs; see Inputs overview.

Use the API control (top right) to switch between the options prop and <catnip-dropdown-option> child elements. Pick one API per dropdown — do not combine them. See Specs and Guidelines — Choosing an API for shapes and decision guidance.

What the dropdown owns

Regardless of which options API you use, catnip-dropdown handles:

• Field label, trigger, open state, selection, and keyboard navigation
• Teleported list panel (search row, empty state, scroll); inside a modal Dialog or Drawer the panel parks in the open <dialog> so it is not inert under showModal(). The list is at least as wide as the trigger and grows with content up to listMaxWidth (default 320px, never narrower than the trigger). Long option labels wrap.
• Multi-select display modes (value, chips, count)

List and floating-panel internals stay private; compose custom search via listHeader, or use built-in selectAll (multi only) and footer actions via slots.

Live example

The playground matches the selected API above.

When to use

• Catnip dropdown — styled field select with checkmark (single) or checkbox (multi) rows, chips/count trigger modes, and design-system validation states.
• Native <select> — simple forms where native behaviour is enough; pair with catnip-field-label if you need the label row only.
• List (internal) — building custom overlays; not a public custom element.

Accessibility

• Trigger exposes aria-haspopup="listbox", aria-expanded, aria-controls, and aria-activedescendant while open.
• Arrow keys, Home/End, Enter/Space, Escape, and typeahead are supported when the panel is open.
• With filterable, focus moves to the inline search field on open; arrow keys move the active option via aria-activedescendant.
• Set intent="danger" and supportingText for validation; aria-invalid is applied on the trigger.