Component Gallery

AD
Profile
Settings
Logout

Forms

Text Input

This field has a helpful hint below it
{% from "components/form.html" import input %} {{ input(name="email", label="Email Address", type="email", placeholder="user@example.com") }} {{ input(name="password", label="Password", type="password", required=true) }} {{ input(name="disabled", label="Disabled Input", value="Cannot edit", disabled="disabled") }} {{ input(name="hint", label="With Hint", hint="This field has a helpful hint") }}

Select

{% from "components/form.html" import select %} {% set options = [ {"value": "", "label": "Select an option..."}, {"value": "gcp", "label": "Google Cloud Platform"}, {"value": "aws", "label": "Amazon Web Services"} ] %} {{ select(name="cloud", options=options, label="Cloud Provider") }}

Textarea

{% from "components/form.html" import textarea %} {{ textarea(name="description", label="Description", placeholder="Enter a description...", rows=4) }}

Checkbox

{% from "components/form.html" import checkbox %} {{ checkbox(name="terms", label="I agree to the terms and conditions") }} {{ checkbox(name="newsletter", label="Subscribe to newsletter", checked=true) }}

Toggle Switch

{% from "components/form.html" import toggle %} {{ toggle(name="notifications", label="Enable notifications") }} {{ toggle(name="darkmode", label="Dark mode", checked=true) }}