//// Basecoat documentation: //// //// Checkbox helpers for boolean selections. //// //// Use [`checkbox`](#checkbox) for the input itself, or the convenience helpers //// for common label/description layouts. //// //// ## Recipe //// //// ```gleam //// import glaze/basecoat/checkbox //// import lustre/attribute //// import lustre/element/html //// //// fn terms_checkbox() { //// checkbox.with_label("terms", "Accept terms", [ //// attribute.checked(True), //// ]) //// } //// ``` //// import lustre/attribute.{type Attribute} import lustre/element.{type Element} import lustre/element/html pub fn checkbox(attrs: List(Attribute(msg))) -> Element(msg) { html.input([attribute.type_("checkbox"), attribute.class("input"), ..attrs]) } pub fn with_label( id: String, label_text: String, attrs: List(Attribute(msg)), ) -> Element(msg) { html.label([attribute.class("label gap-3")], [ checkbox([attribute.id(id), ..attrs]), html.text(label_text), ]) } pub fn with_description( id: String, label_text: String, description: String, attrs: List(Attribute(msg)), ) -> Element(msg) { html.div([attribute.class("flex items-start gap-3")], [ checkbox([attribute.id(id), ..attrs]), html.div([attribute.class("grid gap-2")], [ html.label([attribute.for(id), attribute.class("label")], [ html.text(label_text), ]), html.p([attribute.class("text-muted-foreground text-sm")], [ html.text(description), ]), ]), ]) } pub fn checked() -> Attribute(msg) { attribute.checked(True) } pub fn disabled() -> Attribute(msg) { attribute.disabled(True) } pub fn name(n: String) -> Attribute(msg) { attribute.name(n) } pub fn value(v: String) -> Attribute(msg) { attribute.value(v) } pub fn id(id: String) -> Attribute(msg) { attribute.id(id) }