glaze_oat - v2.0.0

glaze/oat/form

Oat documentation: https://oat.ink/components/form/

The form helpers provide a compact set of primitives for building accessible form layouts with native HTML elements.

Anatomy

A typical form has fields with labels, optional hints, and clear error states. Use the attribute helpers in this module to keep those patterns consistent.

Recipes

A basic labeled field

import glaze/oat/form
import lustre/attribute
import lustre/element/html

fn email_field() {
  form.fieldset([form.field()], [
    form.label([attribute.for("email")], [html.text("Email")]),
    form.input([attribute.id("email"), attribute.type_("email")]),
  ])
}

A field with hint and error state

import glaze/oat/form
import lustre/attribute
import lustre/element/html

fn username_field() {
  form.fieldset([form.field_error()], [
    form.label([attribute.for("username")], [html.text("Username")]),
    form.input([
      attribute.id("username"),
      form.invalid(),
      form.described_by("username-hint"),
    ]),
    html.small([attribute.id("username-hint"), form.hint(), form.error()], [
      html.text("Username is already taken."),
    ]),
  ])
}

References

Values

as_switch

</> 
pub fn as_switch() -> attribute.Attribute(msg)

Set ARIA role="switch" for switch-style controls.

described_by

</> 
pub fn described_by(name: String) -> attribute.Attribute(msg)

Set aria-describedby to reference hint or error text.

error

</> 
pub fn error() -> attribute.Attribute(msg)

field

</> 
pub fn field() -> attribute.Attribute(msg)

Mark a field container for default field styling.

field_error

</> 
pub fn field_error() -> attribute.Attribute(msg)

Mark a field container as errored.

fieldset

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

Render a fieldset for related controls.

Useful for grouping controls that belong together.

form

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

Render a form container.

Use this as the root element for grouped form controls.

group

</> 
pub fn group() -> attribute.Attribute(msg)

hint

</> 
pub fn hint() -> attribute.Attribute(msg)

Mark an element as helper or hint text.

input

</> 
pub fn input(
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

invalid

</> 
pub fn invalid() -> attribute.Attribute(msg)

Set aria-invalid="true".

Use this on controls in an invalid state.

label

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

Render a form label.

Pair with attribute.for(...) to associate it with an input id.

legend

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

Render a legend for a fieldset.

Use this as the visible title for a grouped set of controls.

option

</> 
pub fn option(
  attrs: List(attribute.Attribute(msg)),
  label: String,
) -> element.Element(msg)

select

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

textarea

</> 
pub fn textarea(
  attrs: List(attribute.Attribute(msg)),
  value: String,
) -> element.Element(msg)
✨ Search Document