field

Form fields: a label, a control, and the text that explains or corrects it.

field.field([], [
  input.label([attribute.for("email")], [text("Email")]),
  input.input([
    attribute.id("email"),
    attribute.type_("email"),
    attribute.aria_invalid("true"),
    attribute.aria_describedby("email-hint email-error"),
  ]),
  field.description([attribute.id("email-hint")], [text("We never share it.")]),
  field.error([attribute.id("email-error")], [text("Enter an email address.")]),
])

The ids tie the text to the control, so a screen reader reads the hint and the error along with the label. Group related fields, such as the parts of an address or a set of radio buttons, in a fieldset.

Values

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

description

</>

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

Help text under a control. Give it an id and point the control’s aria-describedby at it.

description_class

</>

pub fn description_class() -> css.Class

error

</>

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

What is wrong with a control’s value. Give it an id, point the control’s aria-describedby at it and set aria-invalid on the control.

error_class

</>

pub fn error_class() -> css.Class

field

</>

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

One field: its label, control, description and error, in that order.

field_class

</>

pub fn field_class() -> css.Class

fieldset

</>

pub fn fieldset(
  attributes: List(attribute.Attribute(msg)),
  legend legend: List(element.Element(msg)),
  children children: List(element.Element(msg)),
) -> element.Element(msg)

Related fields under a shared legend.

fieldset_class

</>

pub fn fieldset_class() -> css.Class

legend_class

</>

pub fn legend_class() -> css.Class