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)
• Multi-select display modes (value, chips, count)

List and floating-panel internals stay private; compose custom search via list-header, 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.