lantern

Forms & inputs

Text inputs

Input, textarea and color input.

Input

Text field with label, sublabel, help text, and error states. Accepts a Phoenix.HTML.FormField.

Basic

Label, name, and placeholder.

Help text & sublabel

Sublabel sits beside the label; help_text sits under the control.

We never share it.

Error state

Pass errors as a list of strings (or use FormField).

must not contain spaces

Disabled

Disabled fields keep their value but cannot be edited.

API reference

Props and slots, introspected from the component.

input/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper text under the label stack.
disabled boolean false Render disabled and non-interactive.
errors list [] Validation messages; derived from field when used.
field {:struct, Phoenix.HTML.FormField} nil Form field; derives id, name, value, and errors.
help_text string nil Trailing help line under the field when no errors.
id any nil Element id; derived from field when omitted.
label string nil Primary label above the control.
name any nil Form input name; derived from field when omitted.
size xs | sm | md | lg | xl "md" Control density / type scale.
sublabel string nil Secondary label line under the primary label.
type string "text" HTML input type (text, email, hidden, …).
value any nil Current input value.
Slots
:inner_prefix Affix inside the control, before the input.
:inner_suffix Affix inside the control, after the input.
:outer_prefix Affix outside the control, before the wrap.
:outer_suffix Affix outside the control, after the wrap.
label/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper line under the label (Fluxon parity).
for string nil id of the labeled control.
sublabel string nil Secondary line under the primary label text.
Slots
:inner_block* Primary label text.
error/1
Prop Type Default Description
class any nil Extra classes merged onto the root element.
Slots
:inner_block* Error message text.

Textarea

Multi-line text input with the same label, help text, and error chrome as input.

Basic

Label and placeholder.

Help text

help_text under the control, same as input.

A short intro for your profile.

Error state

Invalid border and error list.

is too short (minimum is 20 characters)

Disabled

Read-only presentation via disabled.

API reference

Props and slots, introspected from the component.

Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper text under the label stack.
disabled boolean false Render disabled and non-interactive.
errors list [] Validation messages; derived from field when used.
field {:struct, Phoenix.HTML.FormField} nil Form field; derives id, name, value, and errors.
help_text string nil Trailing help line under the field when no errors.
id any nil Element id; derived from field when omitted.
label string nil Primary label above the control.
name any nil Form input name; derived from field when omitted.
rows integer 4 Visible row count for the textarea.
size xs | sm | md | lg | xl "md" Control density / type scale.
sublabel string nil Secondary label line under the primary label.
value any nil Current text content of the textarea.

Color input

A native color control with form-compatible name/value, label, help text, errors, disabled state, and density tokens.

Theme color

The submitted element is the real input type=color.

Used in the project header.

API reference

Props and slots, introspected from the component.

Prop Type Default Description
class any nil Extra classes merged onto the root element.
description string nil Helper text under the label stack.
disabled boolean false Render disabled and non-interactive.
errors list [] Validation messages; derived from field when used.
field {:struct, Phoenix.HTML.FormField} nil Form field; derives id, name, value, and errors.
help_text string nil Trailing help line under the field when no errors.
id any nil Element id; derived from field when omitted.
label string nil Primary label above the control.
name any nil Form input name; derived from field when omitted.
size xs | sm | md | lg | xl "md" Control density / type scale.
sublabel string nil Secondary label line under the primary label.
value any nil Current color as a `#rrggbb` hex string.