Label

from starhtml import *

Div(
    Label("Email", fr="label-email"),
    Input(type="email", id="label-email", placeholder="[email protected]"),
    P("Enter your email address.", cls="text-xs text-muted-foreground"),
    cls="grid w-full max-w-sm gap-1.5"
)

from starhtml import *

Div(
    Div(
        Label(
            Icon("lucide:globe", cls="size-4"),
            "Custom Domain",
            Span("Optional", cls="rounded-full bg-muted px-2 py-0.5 text-xs font-normal"),
            fr="domain",
        ),
        Input(id="domain", placeholder="app.yourdomain.com"),
        cls="grid gap-1.5"
    ),
    Div(
        Label(
            Icon("lucide:key", cls="size-4"),
            "API Secret Key",
            Span(" *", cls="text-destructive"),
            fr="api-secret",
        ),
        Input(id="api-secret", placeholder="sk_live_...", type="password", cls="font-mono text-sm"),
        cls="grid gap-1.5"
    ),
    cls="grid w-full max-w-sm gap-4"
)

from starhtml import *

Div(
    Div(
        Label("Active Field", fr="active-field"),
        Input(id="active-field", placeholder="This input is enabled"),
        cls="grid gap-1.5"
    ),
    Div(
        Label("Disabled Field", fr="disabled-field"),
        Input(id="disabled-field", placeholder="This input is disabled", disabled=True),
        cls="grid gap-1.5"
    ),
    cls="grid w-full max-w-sm gap-4"
)