glaze/basecoat/field

Basecoat documentation: https://basecoatui.com/components/field/

Form field layout helpers for labels, descriptions, and errors.

These helpers don’t replace your input components; they provide a consistent wrapper structure around them.

Anatomy

A typical field has a label, optional description or error, and an input element (from glaze_basecoat/input, glaze_basecoat/select, etc.).

Recipe

import glaze/basecoat/field
import glaze/basecoat/input
import lustre/attribute
import lustre/element/html

fn email_field() {
  field.field([], [
    field.label([attribute.for("email")], [html.text("Email")]),
    field.description([], [html.text("Enter your email address.")]),
    input.email([
      attribute.id("email"),
      input.placeholder("you@example.com"),
    ]),
  ])
}

pub fn description(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn error(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn field(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn label(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pub fn with_description(
  id: String,
  label_text: String,
  description_text: String,
  input_element: element.Element(msg),
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

pub fn with_label(
  id: String,
  label_text: String,
  input_element: element.Element(msg),
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)