checkbox

Checkboxes and radio buttons.

Both are the browser’s own controls in the theme’s primary colour, so keyboard use, form submission and indeterminate work as usual. Wrap one in choice to give it a label you can click:

checkbox.choice(checkbox.checkbox([attribute.name("terms")]), [
  text("I accept the terms"),
])

checkbox.radio_group([attribute.aria_label("Plan")], [
  checkbox.choice(checkbox.radio([attribute.name("plan"), attribute.value("free")]), [text("Free")]),
  checkbox.choice(checkbox.radio([attribute.name("plan"), attribute.value("pro")]), [text("Pro")]),
])

Radio buttons with the same name form one group: the arrow keys move between them.

Values

checkbox

</>

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

choice

</>

pub fn choice(
  control: element.Element(msg),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A control with its label beside it. Clicking the label toggles the control.

choice_class

</>

pub fn choice_class() -> css.Class

classes

</>

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

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

control_class

</>

pub fn control_class() -> css.Class

indeterminate

</>

pub fn indeterminate() -> attribute.Attribute(msg)

Show a checkbox as partly checked, such as “select all” when some rows are selected. The browser draws it; checking it clears the state.

indeterminate_on_load

</>

pub fn indeterminate_on_load() -> attribute.Attribute(msg)

The same, for a page rendered once: howdy/ui/behaviour sets the property when the page loads.

radio

</>

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

radio_group

</>

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

Radio buttons, one per line. Label the group with aria-label, or put it in a howdy/ui/field.fieldset.

radio_group_class

</>

pub fn radio_group_class() -> css.Class