Live Select

A searchable select component with support for single selection, tags, and async search.

Single Select

Tags Mode

Use mode=tags for multi-select with tag chips.

Tags Mode

Quick Tags Mode

Use mode=quick_tags to allow selecting without clearing the search input.

Quick Tags

Allow Clear

Add a clear button with allow_clear.

Allow Clear

Async Search

Live Select sends live_select_change events for server-side filtering.

    def handle_event("live_select_change", %{"id" => id, "text" => text}, socket) do
  # Fetch options from database or API
  options = search_countries(text)

  # Update the LiveSelect component with new options
  send_update(SutraUI.LiveSelect, id: id, options: options)

  {:noreply, socket}
end
  

Custom Option Rendering

Use the option slot to customize how options are displayed.

    <.live_component module={SutraUI.LiveSelect} id="user-select" field={@form[:user]} options={@users}>
  <:option :let={option}>
    <div class="flex items-center gap-2">
      <img src={option.avatar} class="w-6 h-6 rounded-full" />
      <span>{option.label}</span>
    </div>
  </:option>
</.live_component>
  

Max Selectable

Limit the number of selections in tags mode with max_selectable.

    <.live_component
  module={SutraUI.LiveSelect}
  id="tags-select"
  field={@form[:tags]}
  mode={:tags}
  max_selectable={3}
  options={@tags}
/>
  

User-Defined Options

Allow users to create new options by setting user_defined_options.

    <.live_component
  module={SutraUI.LiveSelect}
  id="tags-select"
  field={@form[:tags]}
  mode={:tags}
  user_defined_options
  options={@tags}
/>
  

Disabled

Use the disabled attribute to prevent interaction.

Disabled