GroupCollect 1.3.142

Dropdown

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">
  <.input
    id="dropdown-single-default"
    label="Country"
    name="location[country]"
    type="dropdown"
    value={nil}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
  />
</form>
With prompt Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-prompt"
    label="Country"
    name="location[country]"
    type="dropdown"
    value={nil}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    prompt="Select"
    placeholder="Select..."
  />
</form>
With value Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-value"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
  />
</form>
With options with number value Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-options-with-number-value"
    label="Country"
    name="location[country]"
    type="dropdown"
    value={3}
    options={[%{label: "Afghanistan", value: 1}, %{label: "Albania", value: 2}, %{label: "Algeria", value: 3}, %{label: "Angola", value: 4}, %{label: "Antarctica", value: 5}, %{label: "Argentina", value: 6}]}
    placeholder="Select..."
  />
</form>
With no events to parent Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-no-events-to-parent"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    phx-change="noop"
  />
</form>
With parent form Open in playground 
<.input
  id="dropdown-single-with-parent-form"
  label="Country"
  name="location[country]"
  type="dropdown"
  options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
  placeholder="Select..."
/>
With error Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-error"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    errors={["Error helper text"]}
    placeholder="Select..."
  />
</form>
With error details Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-error-details"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    errors={["Error helper text"]}
    placeholder="Select..."
    show_dropdown_errors
  />
</form>
Disabled Open in playground 
<form class="gc-full-width">
  <.input
    disabled
    id="dropdown-single-disabled"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
  />
</form>
Readonly Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-readonly"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    readonly
    placeholder="Select..."
  />
</form>
With disabled option Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-disabled-option"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{disabled: true, label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}]}
    placeholder="Select..."
  />
</form>
With icon in options Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-icon-in-options"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan", icon: "plus"}, %{label: "Albania", value: "albania", icon: "plus"}, %{label: "Algeria", value: "algeria", icon: "plus"}]}
    placeholder="Select..."
  />
</form>
With option with long text Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-option-with-long-text"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="long text"
    options={[%{label: "Really long text Really long text Really long text Really long text  Really long text", value: "long text", icon: "plus"}, %{label: "Albania", value: "albania", icon: "plus"}, %{label: "Algeria", value: "algeria", icon: "plus"}]}
    placeholder="Select..."
  />
</form>
With add new option Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-add-new-option"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
  >
    <:dropdown_add_new_option>
      <span>Can't find option?</span>
      <.a href="/form/dropdown" target="_blank">Add option</.a>
    </:dropdown_add_new_option>
  </.input>
</form>
With no options and add new option Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-no-options-and-add-new-option"
    label="Country"
    name="location[country]"
    type="dropdown"
    value={nil}
    options={[]}
    placeholder="Select..."
  >
    <:dropdown_add_new_option>
      <span>Can't find option?</span>
      <.a href="/form/dropdown" target="_blank">Add option</.a>
    </:dropdown_add_new_option>
  </.input>
</form>
With multiple Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={[]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
  />
</form>
With multiple and one selected Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-one-selected"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
  />
</form>
With multiple and two selected Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-two-selected"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan", "albania"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
  />
</form>
Shows a custom label instead of 'X selected' when multiple items are selected Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-multi-selection-label"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan", "albania", "algeria", "angola", "antarctica", "argentina"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
    multi_selection_label="All countries"
  />
</form>
Shows a custom suffix in the chip label (e.g. '2 chosen') when multiple items are selected Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-multi-selection-label-suffix"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan", "albania"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
    multi_selection_label_suffix="chosen"
  />
</form>
With multiple selected and options with number value Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-selected-and-options-with-number-value"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={[1, 2]}
    options={[%{label: "Afghanistan", value: 1}, %{label: "Albania", value: 2}, %{label: "Algeria", value: 3}, %{label: "Angola", value: 4}, %{label: "Antarctica", value: 5}, %{label: "Argentina", value: 6}]}
    placeholder="Select..."
    multiple
  />
</form>
With multiple and disabled Open in playground 
<form class="gc-full-width">
  <.input
    disabled
    id="dropdown-single-with-multiple-and-disabled"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
  />
</form>
With multiple and error Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-error"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    errors={["Error helper text"]}
    placeholder="Select..."
    multiple
  />
</form>
With multiple and error details Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-error-details"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    errors={["Error helper text"]}
    placeholder="Select..."
    multiple
    show_dropdown_errors
  />
</form>
With multiple and no events to parent Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-and-no-events-to-parent"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan", "albania"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
    phx-change="noop"
  />
</form>
With multiple and parent form Open in playground 
<.input
  id="dropdown-single-with-multiple-and-parent-form"
  label="Country"
  name="location[country][]"
  type="dropdown"
  value={["afghanistan", "albania"]}
  options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
  placeholder="Select..."
  multiple
/>
With hidden label Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-hidden-label"
    label="Country"
    name="location[country]"
    type="dropdown"
    value={nil}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    label_hidden
  />
</form>
With small caret Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-small-caret"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    dropdown_caret_size="sm"
  />
</form>
With extra small caret Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-extra-small-caret"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    dropdown_caret_size="xs"
  />
</form>
With bold caret Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-bold-caret"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    dropdown_caret_weight="bold"
  />
</form>
With small bold caret Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-small-bold-caret"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    dropdown_caret_size="sm"
    dropdown_caret_weight="bold"
  />
</form>
Selected option is hidden from the dropdown menu Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-selected-hidden-from-menu"
    label="Country"
    name="location[country]"
    type="dropdown"
    value="algeria"
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
  />
</form>
Selected options are hidden from the dropdown menu Open in playground 
<form class="gc-full-width">
  <.input
    id="dropdown-single-with-multiple-selected-hidden-from-menu"
    label="Country"
    name="location[country][]"
    type="dropdown"
    value={["afghanistan", "albania"]}
    options={[%{label: "Afghanistan", value: "afghanistan"}, %{label: "Albania", value: "albania"}, %{label: "Algeria", value: "algeria"}, %{label: "Angola", value: "angola"}, %{label: "Antarctica", value: "antarctica"}, %{label: "Argentina", value: "argentina"}]}
    placeholder="Select..."
    multiple
  >
    <:dropdown_add_new_option>
      <.p size="base">
        <span>Can't find option?</span>
        <.a href="/form/dropdown" target="_blank">Add option</.a>
      </.p>
    </:dropdown_add_new_option>
  </.input>
</form>