GroupCollect 1.3.142

Live Search

Renders an input with label and error messages.

Read more Read less

A Phoenix.HTML.FormField may be passed as argument, which is used to retrieve the input name, id, and values. Otherwise all attributes may be passed explicitly.

Types

This function accepts all HTML input types, considering that:

  • You may also set type="select" to render a <select> tag
  • For live file uploads, see Phoenix.Component.live_file_input/1

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information. Unsupported types, such as hidden and radio, are best written directly in your templates.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />

# Password input with visibility toggle
<.input type="password" name="password" label="Password" />

# The label can be also passed as a custom_label slot (for checkbox, radio, and toggle only)
<.input type="checkbox" name="terms">
  <:custom_label>Accept <.a href="#">terms and conditions</.a></:custom_label>
</.input>

# Password input with help text
<.input type="password" name="password" label="Password">
  <:help>Password must be at least 8 characters long</:help>
</.input>

Accessibility Features

Password Input

  • aria-describedby - Links input with toggle button
  • aria-label - Provides context for the toggle button
  • aria-pressed - Indicates toggle state
  • aria-controls - Associates toggle with input field

Security Features

Password Input

  • Auto-hide password after 5 seconds when revealed
  • autocomplete="current-password" for secure browser password management
Default Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-default-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-default"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    />
  </.stack>
</form>
With hidden label Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-hidden-label-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-hidden-label"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      label_hidden
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    />
  </.stack>
</form>
Disabled Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-disabled-outside-button"}>Outside button</.button>
    <.input
      disabled
      id="live-search-single-disabled"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    />
  </.stack>
</form>
With error Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-error-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-error"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      errors={["Error helper text"]}
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    />
  </.stack>
</form>
With custom no results content Open in playground
Results will be filtered as you type 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-custom-no-results-content-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-custom-no-results-content"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    >
      <:no_results_content>
        No results found.
        <span><.a href="#">Add manually</.a></span>
      </:no_results_content>
    </.input>
  </.stack>
</form>
With custom no results content with text Open in playground
Results will be filtered as you type 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-custom-no-results-content-with-text-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-custom-no-results-content-with-text"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    >
      <:no_results_content :let={text}>
        No results found.
        <span><.a href="#">"{text}" is missing, add manually?</.a></span>
      </:no_results_content>
    </.input>
  </.stack>
</form>
With chips Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-chips-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-chips"
      label="Search country with chips"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_with_chips/1}
    />
  </.stack>
</form>
With chip types Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-chip-types-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-chip-types"
      label="Search country with different chip types"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_with_chip_types/1}
    />
  </.stack>
</form>
Legacy tuple format Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-legacy-tuple-format-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-legacy-tuple-format"
      label="Search country (legacy tuple format)"
      name="country"
      type="live_search"
      value=""
      search_func={&Storybook.Form.LiveSearch.search_country_legacy/1}
    />
  </.stack>
</form>
With fire on focus Open in playground 
<form class="gc-full-width">
  <.stack space="xl">
    <.button id={"live-search-single-with-fire-on-focus-outside-button"}>Outside button</.button>
    <.input
      id="live-search-single-with-fire-on-focus"
      label="Search country"
      name="country"
      type="live_search"
      value=""
      fire_on_focus
      search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
    />
  </.stack>
</form>
With parent form Open in playground 
<.input
  id="live-search-single-with-parent-form"
  label="Search country"
  name="country"
  type="live_search"
  value=""
  search_func={&Storybook.Form.LiveSearch.search_country_map_format/1}
/>