Input field

v0.0.10

v0.0.10StableComponentStatelessApache-2.0
Installation mix mishka.ui.gen.component input_field
Source View Source

Input component

The input component is one function component for the standard HTML input types: text, email, password, number, url, tel, search, the date and time types, color, range, file, checkbox, select and textarea. Its API follows the input/1 component that mix phx.new generates in core_components.ex: a type, a label, a field or a name and value, errors, and options, prompt and multiple for a select. The dedicated field components are the better choice when you need colors, sizes or floating labels.

Input component

heex
<.input name="name" value="" type="text" label="Full Name" />
<.input name="add" value="" type="text" label="Address" />
<.input name="tel" value="" type="text" label="Phone" />
<.input name="zip" value="" type="text" label="Zipcode" />
<.input name="email" value="" label="Email" />

<.input
  name="job"
  type="select"
  label="Choose your Job"
  value="true"
  options={[
    {"foo", 1},
    {"bar", 2}
  ]}
/>

<.input
  name="start-houre"
  value=""
  type="datetime-local"
  label="Start office hour"
/>

<.input
  name="start-day"
  value=""
  type="datetime-local"
  label="Start office day"
/>

<.input name="" value="" type="checkbox" label="Terms" />

<.input name="sal" value="" type="range" label="Salary" />