GroupCollect 1.3.142

Toggle

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
Plain Open in playground 
<.input id="toggle-single-plain" label="toggle 1" name="foo" type="toggle" value="bar"/>
Checked Open in playground 
<.input
  id="toggle-single-checked"
  label="toggle 2"
  name="foo"
  type="toggle"
  value="bar"
  checked
/>
With help Open in playground

Helper text 

<.input
  id="toggle-single-with-help"
  label="toggle 3"
  name="foo"
  type="toggle"
  value="bar"
>
  <:help>Helper text</:help>
</.input>
With long label Open in playground 
<.input
  id="toggle-single-with-long-label"
  label="This is a very long toggle label designed to wrap across multiple lines so we can verify that the click and tap area follows the label container rather than extending too far across the row."
  name="long_label"
  type="toggle"
  value="long_label"
/>
With custom label Open in playground 
<.input
  id="toggle-single-with-custom-label"
  label="Toggle"
  name="foo"
  type="toggle"
  value="bar"
>
  <:custom_label>Accept <.a href="#">Terms & Conditions</.a></:custom_label>
</.input>
Custom label with label_hidden Open in playground 
<.input
  id="toggle-single-with-custom-label-hidden"
  label="Toggle"
  name="foo"
  type="toggle"
  value="bar"
  label_hidden
>
  <:custom_label>Accept <.a href="#">Terms & Conditions</.a></:custom_label>
</.input>
With error Open in playground

error message 

<.input
  id="toggle-single-with-error"
  label="Invalid option"
  name="invalid"
  type="toggle"
  value="invalid"
  errors={["error message"]}
  checked
/>
Disabled Open in playground 
<.input
  disabled
  id="toggle-single-disabled"
  label="toggle 1"
  name="foo"
  type="toggle"
  value="bar"
/>
Disabled checked Open in playground 
<.input
  disabled
  id="toggle-single-disabled-checked"
  label="toggle 2"
  name="foo"
  type="toggle"
  value="bar"
  checked
/>
Disabled with help Open in playground

Helper text 

<.input
  disabled
  id="toggle-single-disabled-with-help"
  label="toggle 2"
  name="foo"
  type="toggle"
  value="bar"
>
  <:help>Helper text</:help>
</.input>