LineaUI.Components.Form (linea_ui v0.1.1)

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).

Summary

Functions

error(assigns)

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

field(assigns)

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.

help_text(assigns)

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

label(assigns)

A caption for the control with the id for.

Functions

error(assigns)

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(assigns)

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(assigns)

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(assigns)

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)