Phoenix Storybook

Input

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

  • type="checkbox" is used exclusively to render boolean values

  • 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!"]} />
Text Open in playground

This field is invalid 

<.input
  id="input-text-default"
  label="Text input"
  name="default"
  type="text"
  value="some text"
/>
<.input
  id="input-text-errors"
  label="Input with errors"
  name="text_errors"
  value="invalid value"
  errors={["This field is invalid"]}
/>
Select Open in playground 
<.input
  id="input-single-select"
  label="Select list"
  name="checkbox"
  type="select"
  value="user"
  options={[Admin: "admin", User: "user"]}
/>
Checkbox Open in playground 
<.input
  id="input-checkbox-opt1"
  label="Option 1"
  name="checkbox"
  type="checkbox"
  checked
/>
<.input id="input-checkbox-opt2" label="Option 2" name="checkbox" type="checkbox"/>
Area Open in playground 
<.input
  id="input-single-area"
  label="Text area"
  name="textarea"
  type="textarea"
  value="user"
/>
Various input types Open in playground 
<.input id="input-type-number" label="Number" name="number" type="number" value="number"/>
<.input id="input-type-range" label="Range" name="range" type="range" value="range"/>
<.input id="input-type-email" label="Email" name="email" type="email" value="email"/>
<.input
  id="input-type-password"
  label="Password"
  name="password"
  type="password"
  value="password"
/>
<.input id="input-type-tel" label="Tel" name="tel" type="tel" value="tel"/>
<.input id="input-type-search" label="Search" name="search" type="search" value="search"/>
<.input id="input-type-month" label="Month" name="month" type="month" value="month"/>
<.input id="input-type-week" label="Week" name="week" type="week" value="week"/>
<.input id="input-type-date" label="Date" name="date" type="date" value="date"/>
<.input id="input-type-time" label="Time" name="time" type="time" value="time"/>
<.input id="input-type-color" label="Color" name="color" type="color" value="color"/>
<.input id="input-type-file" label="File" name="file" type="file" value="file"/>