Skip to main content

tablo_ui/components/primitives/
label.rs

1// SYNC: topcoat-ui-registry@0.10.0 sha256:6741fe1cf51bea5cfe0d0c8d25548e452661d9017529a7163bc5b60ce725a8d5 — do not hand-edit. Sync via `cargo xtask sync-topcoat-ui` (ADR-0007).
2use topcoat::{
3    Result,
4    view::{Attributes, Child, StaticClass, View, class, component, view},
5};
6
7/// Classes that align label content and reflect the disabled state of a nearby or
8/// nested control.
9const LABEL: StaticClass = class!(
10    "flex items-center gap-2 text-sm leading-none font-medium select-none \
11     peer-disabled:pointer-events-none peer-disabled:opacity-50 \
12     peer-has-[:disabled]:pointer-events-none peer-has-[:disabled]:opacity-50 \
13     has-[+:disabled]:pointer-events-none has-[+:disabled]:opacity-50 \
14     has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
15);
16
17/// A label for a form control.
18///
19/// Wrap the control or pass a `for` attribute matching its `id`. Pass the label text as
20/// children. `attrs` are forwarded to the `<label>`, with extra classes added to its
21/// classes.
22///
23/// ```ignore
24/// view! {
25///     <div class="flex flex-col gap-2">
26///         label(attrs: attributes! { for="email" }, "Email")
27///         input(attrs: attributes! { id="email" type="email" })
28///     </div>
29/// }
30/// ```
31#[component]
32pub async fn label(
33    #[default] mut attrs: Attributes,
34    #[default] child: Child<'_>,
35) -> Result<impl View> {
36    Ok(view! {
37        <label class=(class!(LABEL, attrs.remove("class"))) (attrs)>(child)</label>
38    })
39}