# `LineaUI.Components.Form`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/form.ex#L1)

The pieces LineOne's forms are made of: a caption, a help line, an error line and the
`field` wrapper that puts them around any control.

    <.label for="email">Email</.label>
    <.help_text>We never share it.</.help_text>
    <.error>can't be blank</.error>

    <.field label="Country" help="Where you live" errors={@form[:country].errors}>
      <select class="form-select ...">…</select>
    </.field>

`input`, `textarea`, `range` and the groups already render their own field, so `field` is
for the controls LineaUI does not draw (a native `<select>`, a third-party widget).

# `error`

A validation message, in LineOne's small red text.

    <.error>Username is invalid</.error>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `field`

Wraps a control with its caption, help line and errors, laid out the way LineOne's forms
are: the caption on top, the control `mt-1.5` under it, then the help and the errors.

With `as="label"` (the default) the whole block is a `<label>`, so a click on the caption
focuses the control. Groups of checkboxes or radios use `as="div"`, and their own container
then lays the options out.

    <.field label="Category" help="Pick one">
      <select class="form-select w-full ...">…</select>
    </.field>

## Attributes

* `field` (`Phoenix.HTML.FormField`) - Takes the errors from a form field. Defaults to `nil`.
* `id` (`:string`) - The id of the control, for the caption's `for`.
* `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 `[]`.
* `state` (`:string`) - Defaults to `nil`.Must be one of `nil`, `"success"`, or `"error"`.
* `as` (`:string`) - Defaults to `"label"`. Must be one of `"label"`, or `"div"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `help_text`

The small line under a control that explains it. `state="success"` paints it green and
`state="error"` red, as LineOne's validation examples do.

    <.help_text>This is a help text</.help_text>
    <.help_text state="success">Username is valid</.help_text>

## Attributes

* `state` (`:string`) - Defaults to `nil`.Must be one of `nil`, `"success"`, or `"error"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `label`

A caption for the control with the id `for`.

    <.label for="username">Choose Username:</.label>

## Attributes

* `for` (`:string`) - Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*