# `LineaUI.Components.Input`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/input.ex#L1)
LineOne's text inputs: outlined or filled, rounded or pill, three sizes, icons inside,
success and error states, and input masks.
<.input name="username" placeholder="Username" />
<.input field={@form[:email]} type="email" label="Email" help="We never share it" />
<.input name="q" variant="filled" shape="pill" size="lg" placeholder="Search" />
<.input name="company" label="Company name" placeholder="Your Company">
<:prefix>
<.input name="username" value="taken" state="error" help="Username is invalid" />
<.input name="amount" size="sm" align="right" />
Without a caption, help or errors it renders the bare `` (wrapped in a positioning
span when it has icons), so it can sit inside an `input_group`.
## Masks
`mask` formats what is typed, as LineOne's Cleave.js examples do. `mask_options` tunes it:
<.input name="card" mask="credit_card" placeholder="xxxx xxxx xxxx xxxx" />
<.input name="date" mask="date" mask_options={%{pattern: ~w(m d Y), delimiter: "-"}} />
<.input name="time" mask="time" mask_options={%{pattern: ~w(h m s)}} />
<.input name="phone" mask="phone" />
<.input name="amount" mask="numeral" mask_options={%{thousands: "lakh"}} />
<.input name="code" mask="blocks" mask_options={%{blocks: [3, 2, 3, 3], delimiters: [".", "_", "-"], uppercase: true}} />
<.input name="ref" mask="blocks" mask_options={%{prefix: "Prefix", delimiter: "-", blocks: [6, 4, 4, 7]}} />
| mask | options |
|---|---|
| `blocks` | `blocks`, `delimiter`, `delimiters`, `prefix`, `uppercase`, `lowercase`, `numeric` |
| `credit_card` | `delimiter` (`" "`); blocks follow the card brand (Amex 4-6-5, Diners 4-6-4) |
| `date` | `pattern` of `d m y Y` (`~w(d m Y)`), `delimiter` (`"/"`) |
| `time` | `pattern` of `h m s` (`~w(h m s)`), `delimiter` (`":"`) |
| `phone` | `blocks` (`[3, 3, 4]`), `delimiter` (`" "`) |
| `numeral` | `thousands` (`thousand lakh wan none`), `decimals` (`2`), `delimiter` (`","`), `decimal_mark` (`"."`), `positive` |
The input submits the masked text. `mask_submit="raw"` submits the unmasked value instead
(digits, or a plain number like `1234.5` for `numeral`) through a hidden input that carries
the field's name; `phx-debounce`/`phx-throttle` are copied onto it.
<.input field={@form[:amount]} mask="numeral" mask_submit="raw" phx-debounce="300" />
## Clearing a focused input
`clear_on_submit` makes the field take the server's `value` after its form is submitted even
while it has focus:
<.form for={@form} phx-submit="add">
<.input id="todo" name="title" value={@title} clear_on_submit />
The mask runs in the `LineaUI.InputMask` hook, so a masked input needs a stable `id` (it gets
one from `field`; pass one otherwise when the input re-renders).
# `input`
Renders a text-like ``, with its caption, help and errors when given.
## Attributes
* `field` (`Phoenix.HTML.FormField`) - A form field: fills `id`, `name`, `value` and `errors`. Defaults to `nil`.
* `id` (`:string`) - Defaults to the field's id.
* `name` (`:string`) - Defaults to the field's name.
* `value` (`:any`)
* `type` (`:string`) - Defaults to `"text"`. Must be one of `"text"`, `"email"`, `"password"`, `"number"`, `"search"`, `"tel"`, `"url"`, `"date"`, `"time"`, `"datetime-local"`, `"month"`, `"week"`, `"color"`, `"file"`, or `"hidden"`.
* `variant` (`:string`) - `plain` has no border nor background, for inputs inside a framed block. Defaults to `"outlined"`. Must be one of `"outlined"`, `"filled"`, or `"plain"`.
* `size` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `shape` (`:string`) - Defaults to `"rounded"`. Must be one of `"rounded"`, or `"pill"`.
* `align` (`:string`) - `right` aligns the typed text to the right, for amounts. Defaults to `"left"`. Must be one of `"left"`, or `"right"`.
* `state` (`:string`) - Paints the border and the help line. Errors set `error` on their own. Defaults to `nil`. Must be one of `nil`, `"success"`, or `"error"`.
* `label` (`:string`) - The caption. Defaults to `nil`.
* `label_class` (`:any`) - Classes of the caption text. Defaults to `nil`.
* `help` (`:string`) - The small line under the control. Defaults to `nil`.
* `errors` (`:list`) - Messages to show; `field` adds its own once the input was used. Defaults to `[]`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `options` (`:list`) - Suggestions, rendered as the input's `