KITT

Search Select

A component that facilitates searching for records and selecting a single result.

Read more Read less

This component relies on KittAppEventBindings to support the execution of JS commands pushed from the server:

import { KittAppEventBindings } from "kitt/priv/static/assets/js/kitt";

KittAppEventBindings();
Default Open in playground
  • Option 1
  • Option 2
  • Option 3 
<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    id="search-select-single-default"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"default-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
Disabled Open in playground
  • Option 1
  • Option 2
  • Option 3 
<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    disabled
    id="search-select-single-disabled"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"disabled-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
With errors Open in playground
  • Option 1
  • Option 2
  • Option 3

Error 1

Error 2 

<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    field={%FormField{id: :fake_form_field, name: "test", errors: ["Error 1", "Error 2"], field: :fake_field, form: %Phoenix.HTML.Form{source: nil, impl: nil, id: nil, name: nil, data: nil, action: nil, hidden: [], params: %{"fake_field" => 123}, errors: [], options: [], index: nil}, value: nil}}
    id="search-select-single-with-errors"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"with_errors-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
With label Open in playground
  • Option 1
  • Option 2
  • Option 3 
<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    id="search-select-single-with-label"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    label="Label"
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"with_label-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
With prompt Open in playground
  • Option 1
  • Option 2
  • Option 3 
<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    id="search-select-single-with-prompt"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    prompt="Prompt"
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"with_prompt-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
With placeholder Open in playground
  • Option 1
  • Option 2
  • Option 3 
<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    id="search-select-single-with-placeholder"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    placeholder="Placeholder"
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"with_placeholder-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
With description Open in playground
  • Option 1
  • Option 2
  • Option 3

Description 

<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={[%{id: "1", name: "Option 1"}, %{id: "2", name: "Option 2"}, %{id: "3", name: "Option 3"}]}
    description="Description"
    id="search-select-single-with-description"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    search={&Kitt.Storybook.SearchSelect.search/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"with_description-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>
With search failure Open in playground 
<form>
  <.search_select
    :let={selection}
    class="kt-w-64"
    default_options={nil}
    id="search-select-single-with-search-failure"
    identify_option={&Kitt.Storybook.SearchSelect.identify_option/1}
    search={&Kitt.Storybook.SearchSelect.search_that_fails/1}
  >
    <:results :let={r}>
      <ul class="kt">
        <li
          :for={option <- r.options}
          id={"with_search_failure-option-#{option.id}"}
          class={["kt-py-1 kt-px-2 kt-font-sans", r.option_classes]}
          {r.option_attributes.(option)}
        >
          {option.name}
        </li>
      </ul>
    </:results>
    <span :if={selection}>{selection.name}</span>
  </.search_select>
</form>