A component that facilitates searching for records and selecting a single result.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>