GroupCollect 1.3.215
- 1.1.0

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
Results will be filtered as you type
Attribute Type Documentation Default Value
id :any
name :any
Required label * :string
mobile_label :string
label_hidden :boolean

Visually hides the label while keeping it accessible to screen readers
false
value :any
kind :string "checkbox"
icon :string

Adds an icon to at the end of the input
placeholder :string
cancellable :boolean false
hook :string
show_error_messages :boolean true
show_dropdown_errors :boolean false
dropdown_caret_size :string "sm"
dropdown_caret_weight :string "regular"
show_selected_options_in_menu :boolean

Controls whether selected options should be shown in the dropdown menu
true
input_size :string "base"
fractional_digits :integer

Number of decimal places money inputs accept and display, 0 for whole dollars
2
min_date %Date{}
max_date %Date{}
default_selection :any

The default selection map with keys: label, value, optional chip_text, and optional chip_type. Also supports legacy {label, value} tuple format.
%{label: nil, value: nil, chip_text: nil, chip_type: nil}
type :string "text"
allow_phone_extension :boolean

Allows x123 and #123 extension suffixes on phone inputs
false
field %FormField{}

a form field struct retrieved from the form, for example: @form[:email]
errors :list []
checked :boolean

The checked flag for checkbox inputs
prompt :string

The prompt for select inputs
options :list

The options to pass to Phoenix.HTML.Form.options_for_select/2 or the radio group
multiple :boolean

The multiple flag for select inputs
false
multi_selection_label :string

Custom label to display when multiple items are selected in a dropdown
multi_selection_label_suffix :string

Custom suffix for the default multi-selection chip label (e.g. ‘3 selected’). Only used when multi_selection_label is not set.
"selected"
form :any
required :boolean false
form_action :any
fire_on_focus :boolean

Perform an initial search when the input is focused.

 Read more Read less
false

This is used to prepopulate results. Only applies to live_search.
aria_describedby :string
no_results_text :string "No results found."
search_func {:fun, 1}

Function invoked in live search for searching respective text

 Read more Read less

Example

def search_country(search_text) do for {code, country} <- list_countries(),

String.downcase(country) =~ String.downcase(search_text),
do: {country, Atom.to_string(code)}

end
calendar_alignment :string

Controls where the popover appears relative to the input (left or right). Only applies to date picker inputs.
"right"
rest :global
search_start_length :integer 1
custom_label :slot

Custom content for the label (for checkbox, radio, and toggle only). Takes priority over the label attr.
inner_block :slot

Default slot for component content
help :slot

Helper text appearing below the input
Show slot attributes Hide slot attributes
icon :string

An icon name from the Icon component
dropdown_add_new_option :slot

Shows option for showing functionality to add new option
no_results_content :slot

Shows custom content for no results in live search

 
<:no_results_content :let={text}>
  No results found.
  <span><.a href="#">"{text}" is missing, add manually?</.a></span>
</:no_results_content>
custom_icons :slot

To add multiple icon structure, multiple icons in input
radio :slot

Radio group options
Show slot attributes Hide slot attributes
Required value * :any
Required label * :string
checked :boolean
content_hidden :boolean
always_render_content :boolean