Skip to content
LSD Framework
Components · combobox

Combobox. Filterable, keyboard-first.

A text input layered over a filterable option list. Arrow keys navigate, Enter selects, Escape closes. Five variants: single, multi-select, with-create-new, grouped, async-loading.

01 · base

.lsd-combobox

Type to filter. Use ↑ ↓ to move, Enter to choose, Esc to close.

single

Single select

    <div class="lsd-combobox" data-cb>
    02 · variants

    Five variants

    .lsd-combobox--multi-select

    Multi select

      .lsd-combobox--multi-select
      .lsd-combobox--with-create-new

      With create-new

        .lsd-combobox--with-create-new
        .lsd-combobox--with-groups

        With groups

          .lsd-combobox--with-groups
          .lsd-combobox--async-loading

          Async loading

            .lsd-combobox--async-loading
            03 · animations

            Dropdown entrance

            Chain .lsd-fx--* on the list element for entrance animation.

            .lsd-fx--slide-down

            Slide-down

              .lsd-fx--slide-down
              .lsd-fx--blur-in

              Blur-in

                .lsd-fx--blur-in
                Components · LSD primitives
                ↩ Framework index