@jpgilldev / steid

steid/src/components/label.rs
1.4 KBRaw
1use topcoat::{
2 Result,
3 view::{Attributes, View, class, component, view},
4};
5
6/// The classes for the [`label`] element.
7///
8/// The label lays out its content in a centered row, so an inline icon or a
9/// wrapped control lines up with the text. It dims and stops receiving
10/// pointer events when its control is disabled: a wrapped control is matched
11/// with `has-[:disabled]`, a preceding sibling control marked `peer` with
12/// `peer-disabled`.
13const LABEL: &str = "flex items-center gap-2 text-sm leading-none font-medium select-none \
14 peer-disabled:pointer-events-none peer-disabled:opacity-50 \
15 has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
16
17/// A caption for a form control, rendered as a `<label>`.
18///
19/// Associate it with a control either by wrapping the control or by pointing
20/// a `for` attribute at the control's `id`. The `attrs` (such as `class` or
21/// `for`) are forwarded to the underlying `<label>`; a `class` among them is
22/// appended to the computed classes. Child nodes become the label's content.
23///
24/// ```ignore
25/// view! {
26/// <div class="flex flex-col gap-2">
27/// label(attrs: attributes! { for="email" }, "Email")
28/// input(attrs: attributes! { id="email" type="email" })
29/// </div>
30/// }
31/// ```
32#[component]
33pub async fn label(#[default] mut attrs: Attributes, #[default] child: View) -> Result {
34 view! { <label class=(class!(LABEL, attrs.remove("class"))) (attrs)>(child)</label> }
35}