Input

def sign_in() -> None:
    with ui.vstack(gap="md", classes="w-full max-w-sm"):
        with ui.form_field(label="Email"):
            ui.input(type="email", icon_left="mail", placeholder="[email protected]",
                     autocomplete="email")
        with ui.form_field(label="Password"):
            ui.input(type="password", icon_left="lock",
                     autocomplete="current-password")
        ui.button("Sign in", classes="w-full")

def prefix_suffix() -> None:
    with ui.vstack(gap="md", classes="w-full max-w-sm"):
        with ui.form_field(label="Website"):
            ui.input(prefix="https://", placeholder="northwind.com")
        with ui.form_field(label="Hourly rate"):
            ui.input(prefix="€", suffix="/ hour", value="85")
        with ui.form_field(label="Team handle"):
            ui.input(suffix=".bretzel.app", placeholder="design-team")

def sizes() -> None:
    with ui.vstack(gap="sm", classes="w-full max-w-sm"):
        for size in ("xs", "sm", "md", "lg", "xl"):
            ui.input(size=size, placeholder=f"Search projects ({size})",
                     icon_left="search")

class CustomerSearch(PageState):
    query: str = field(default="")


def search_customers(search: CustomerSearch) -> None:
    """The typed parameter receives the input's value; the list follows."""


@refreshable(deps=[CustomerSearch])
def customer_results() -> None:
    needle = CustomerSearch().query.strip().lower()
    hits = [c for c in CUSTOMERS if needle in c[0].lower() or needle in c[1].lower()]
    with ui.vstack(gap="xs"):
        for name, city, plan in hits:
            with ui.hstack(gap="sm", justify="between"):
                with ui.hstack(gap="sm"):
                    ui.avatar(name=name, size="xs", color="secondary")
                    ui.text(name, weight="medium")
                    ui.text(city, color="muted", size="sm")
                ui.badge(plan, variant="soft", size="sm")
        if not hits:
            ui.text(f"No customer matches “{needle}”.", color="muted")


def live_search() -> None:
    with ui.vstack(gap="md", classes="w-full max-w-md"):
        ui.input(value=CustomerSearch().query, placeholder="Filter customers…",
                 icon_left="search", clearable=True, debounce=250,
                 on_input=search_customers)
        customer_results()

def states() -> None:
    with ui.vstack(gap="md", classes="w-full max-w-sm"):
        with ui.form_field(label="API key", hint="Read-only — rotate it from "
                                                  "the security tab."):
            ui.input(value="bz_live_4f9a…c21e", readonly=True, icon_left="key-round")
        with ui.form_field(label="Organisation ID"):
            ui.input(value="org_83kd02", disabled=True)
        with ui.form_field(label="Coupon"):
            ui.input(value="SPRING-25", clearable=True, color="success")