name='' email='' quantity=1
size=None date='' notes=''
phone='' card=''

<ui.TextField label="Name" required="true" @bind="name" hint="Your full name" />
<ui.NumberField label="Quantity" min="1" max="99" @bind="quantity" />
<ui.Select label="Size" options="Small, Medium, Large" @bind="size" />
<ui.TextArea label="Notes" rows="3" @bind="notes" />
<ui.TextField label="Phone" mask="(999) 999-9999" @bind="phone" />

form = Form(
    email=[rules.required(), rules.email()],
    password=[rules.required(), rules.min_length(8)],
    confirm=rules.same_as("password", "The passwords don't match"),
    agreed=rules.accepted("Agree to the terms to continue"),
)

def submit(self):
    if self.form.check():      # every message shows; the first bad field gets focus
        ...

<ui.TextField ref="email" label="Email" @bind="email"
              :error="form.error('email')" @blur="form.touch('email')" />

<ui.Stepper :steps="steps" @bind="step" linear="true"
            @next="check(event)" @finish="place_order" finish_label="Place order">
  <If cond="step == 'account'"> ... </If>
  <ElseIf cond="step == 'delivery'"> ... </ElseIf>
</ui.Stepper>

steps = [("account", "Account"), ("delivery", "Delivery"),
         {"value": "gift", "label": "Gift message", "optional": True},
         ("review", "Review")]

def check(self, step):          # False keeps the stepper on this step
    form = {"account": self.account, "delivery": self.delivery}.get(step)
    return form.check() if form is not None else True

plan = 'pro', updates = True, agreed = False

<ui.RadioGroup label="Plan" :options="[('free', 'Free'), ('pro', 'Pro')]" @bind="plan" />
<ui.Checkbox label="Send me updates" @bind="updates" />
<ui.Switch label="Dark mode" @bind="dark" />

city=None  category=None

<ui.CascadeSelect label="City" :options="places" @bind="city"
                  show_path="true" clearable="true" @load="load_cities(event)" />

places = [
    {"value": "au", "label": "Australia", "children": [
        {"value": "nsw", "label": "New South Wales", "children": [
            {"value": "syd", "label": "Sydney"}, ...]},
    ]},
    {"value": "ca", "label": "Canada", "children": None},   # loads when opened
]

volume=40  price=(100, 350)  rating=4  opacity=0.8

<ui.Slider label="Volume" @bind="volume" format="{}%" />
<ui.Slider label="Price" :min="0" :max="500" :step="10" range="true"
           @bind="price" format="${}" value_label="side" />
<ui.Slider label="Rating" :min="1" :max="5" ticks="true"
           value_label="always" marks="1, 3, 5" @bind="rating" />
<ui.Slider label="Opacity" :max="1" :step="0.05" lazy="true" @bind="opacity" />

<ui.Button @click="confirming = True">Delete project</ui.Button>
<ui.Dialog title="Delete project?" @bind="confirming">
  <p>This can't be undone.</p>
  <Fill name="footer">
    <ui.Button @click="confirming = False">Cancel</ui.Button>
    <ui.Button variant="danger" @click="delete()">Delete</ui.Button>
  </Fill>
</ui.Dialog>

<ui.BottomSheet title="Share" @bind="sharing" :items="[
    {'value': 'link', 'label': 'Copy link', 'icon': 'copy'},
    {'value': 'email', 'label': 'Email', 'description': 'Opens your mail app'},
]" @select="share(event)" />

<ui.BottomSheet title="Filters" @bind="filtering">
  ... any content ...
  <Fill name="actions">
    <ui.Button variant="primary" @click="filtering = False">Show results</ui.Button>
  </Fill>
</ui.BottomSheet>

<ui.Tabs options="Overview, Activity, Settings" @bind="tab">
  <If cond="tab == 'Overview'"> ... </If>
  <ElseIf cond="tab == 'Activity'"> ... </ElseIf>
  <Else> ... </Else>
</ui.Tabs>

Picked: nothing yet

<ui.Table :rows="orders" row_key="id" sortable="true" @select="open_order"
          :columns="[('id', '#'), 'customer', 'status', {'key': 'total', 'format': ',.2f'}]">
  <Fill name="cell">
    <If cond="column == 'status'"><ui.Badge>{{ text }}</ui.Badge></If>
    <Else>{{ text }}</Else>
  </Fill>
</ui.Table>

<ui.BarChart :data="sales" x="month" y="online, store" title="Sales"
             stacked="true" format="${:,.0f}" @select="open_month(event)" />

<ui.LineChart :data="visits" x="day" y="desktop, mobile" curve="smooth" fill="true" />

<ui.BarChart :data="weather" x="month" y="rain" :series="[
    {'key': 'temp', 'type': 'line', 'axis': 'right', 'color': 'warning'}]" />

<ui.PieChart :data="{'Chrome': 64.7, 'Safari': 18.6, 'Other': 16.7}" />
<ui.PieChart :data="spend" label="category" value="amount" donut="true" center="total" />
<ui.PolarAreaChart :data="tickets" />
<ui.RadarChart :data="skills" x="skill" y="ada, grace" />

<ui.ScatterChart :data="people" x="height" y="weight" group="group" trend="true" />
<ui.ScatterChart :data="countries" x="income" y="life" size="people" label="name" />
<ui.Sparkline :data="[31, 33, 32, 36, 38, 41]" kind="area" />
<ui.Gauge :value="cpu" label="CPU" format="{:.0f}%" bands="60:success, 85:warning, 100:danger" />
<ui.FunnelChart :data="{'Visited': 12400, 'Signed up': 4100, 'Paid': 310}" />
<ui.WaterfallChart :data="bridge" label="item" value="amount" totals="Revenue, Profit" />

<ui.Histogram :data="people" y="height" group="group" curve="true" show_mean="true" />
<ui.BoxPlot :data="{'Search': times_a, 'Login': times_b}" violin="true" points="all" />
<ui.Heatmap :data="visits" x="hour" y="day" value="visits" />
<ui.CorrelationMatrix :data="cars" triangle="lower" />
<ui.CandlestickChart :data="prices" averages="5, 20" />
<ui.Treemap :data="sales" path="region, country" value="sales" />
<ui.SankeyChart :data="[('Salary', 'Budget', 5200), ('Budget', 'Savings', 2700)]" />
<ui.CalendarHeatmap :data="contributions" />
<ui.LineChart :data="forecast" x="month" :series="[
    {'key': 'forecast', 'lower': 'low', 'upper': 'high'}, {'key': 'actual', 'trend': True}]" />
<ui.BarChart :data="trials" x="dose" y="effect" :series="[{'key': 'effect', 'error': 'se'}]" />

sales = [{"month": "Jan", "online": 4200, "store": 3100}, ...]   # or a DataFrame

<ui.Tree :nodes="files" @bind="selected" :filter="query"
         @load="load_folder(event)" @activate="open_file(event)" />

<ui.Tree :nodes="permissions" checkable="true" expand_all="true" @bind="granted" />

files = [
    {"value": "src", "label": "src", "icon": "folder", "children": [
        {"value": "app", "label": "app.weft", "icon": "file"},
    ]},
    {"value": "docs", "label": "docs", "icon": "folder", "children": None},  # loads on open
]

async def load_folder(self, value):
    children = await fetch_folder(value)
    ...  # put them in that node's children list

<ui.Toaster />   <!-- once, inside <ui.Theme> -->
<ui.Toaster look="snackbar" />   <!-- or as a snackbar -->

from pyweft_ui import toast
toast("Changes saved.", "success")
toast("Item deleted.", action="Undo", on_action=self.undo)

<ui.Grid cols="3" gap="sm"> ... </ui.Grid>
<ui.Row justify="between"> ... </ui.Row>
<ui.Column gap="lg"> ... </ui.Column>

<ui.Divider />
<ui.Divider inset="3.1rem" spacing="none" />   <!-- under a list with avatars -->
<ui.Divider label="or" />
<ui.Divider vertical="true" />                 <!-- between buttons in a Row -->