select

Selects: a button that opens a list of options to choose one from.

select.select(
  id: "plan",
  name: "plan",
  value: "",
  placeholder: "Choose a plan",
  attributes: [],
  items: [
    select.item("free", "Free"),
    select.item("pro", "Pro"),
    select.disabled_item("enterprise", "Enterprise"),
  ],
)

Unlike the native select in howdy/ui/input, the list is styled to match the theme. The chosen value is kept in a hidden input called name, so it submits with a form; a live view hears it with live.on_value(name, ...) on an element around the select.

attributes go on the button that opens the list: attribute.disabled disables it, and attribute.aria_invalid("true") with aria-describedby marks it wrong and points at the message.

The arrow keys, Home, End and the first letters of an option move through the list; Enter or Space chooses. Label it with input.label([attribute.for(id)], ...).

Types

Item

opaque </>

An option, or a labelled group of them.

pub opaque type Item

Values

classes

</>

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

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

disabled_item

</>

pub fn disabled_item(value: String, label: String) -> Item

An option that is shown but cannot be chosen.

group

</>

pub fn group(label: String, items: List(Item)) -> Item

group_label_class

</>

pub fn group_label_class() -> css.Class

item

</>

pub fn item(value: String, label: String) -> Item

listbox_class

</>

pub fn listbox_class() -> css.Class

option_class

</>

pub fn option_class() -> css.Class

root_class

</>

pub fn root_class() -> css.Class

select

</>

pub fn select(
  id id: String,
  name name: String,
  value value: String,
  placeholder placeholder: String,
  attributes attributes: List(attribute.Attribute(msg)),
  items items: List(Item),
) -> element.Element(msg)

A select showing the option whose value is value, or placeholder when none matches.

trigger_class

</>

pub fn trigger_class() -> css.Class