Form

Components for forms with inputs, labels and validation styling.

We'll never share your email.

<Form method="GET" action="">
  <FormItem id="email-field">
    <FormLabel htmlFor="email">Email Address</FormLabel>
    <Input
        id="email"
        placeholder="Email"
        type="email"
    />
    <FormDescription id="email-description">We'll never share your email.</FormDescription>
  </FormItem>
  <Button type="submit">Submit</Button>
</Form>

Installation

uvx --from basic-components components add form
pipx run --spec basic-components components add form
pip install basic-components && components add form
  • Copy Form components below to your local environment
  • Place them in the components/ui/form directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Form method="GET" action="">
  <FormItem id="email-field">
    <FormLabel htmlFor="email">Email Address</FormLabel>
    <Input
        id="email"
        placeholder="Email"
        type="email"
    />
    <FormDescription id="email-description">We'll never share your email.</FormDescription>
  </FormItem>
  <Button type="submit">Submit</Button>
</Form>

Code

{#def
    method: str = "POST",
    action: str = "",
    className: str = ""
#}
<form
    method="{{ method }}"
    action="{{ action }}"
    class="{{ className }} space-y-2"
    {{ attrs.render() }}
>
  {{ content }}
</form>
{#def
    className: str = ""
#}
<div class="{{ className }}">{{ content }}</div>
{#def
    className: str = ""
#}
<p class="{{ className }} text-sm text-zinc-500 dark:text-zinc-400">{{ content }}</p>
{#def
    className: str = ""
#}
<div class="{{ className }} space-y-2">{{ content }}</div>
{#def
    htmlFor: str,
    className: str = "",
    error: bool = False
#}
<label
    for="{{ htmlFor }}"
    class="{% if error %}text-red-500 dark:text-red-800{% endif %} {{ className }} block text-sm font-medium leading-6"
>
  {{ content }}
</label>
{#def
    error: bool = True,
    className: str = ""
#}
<p
    class="{% if error %}text-red-500 dark:text-red-800{% endif %} {{ className }} text-sm font-medium"
>
  {{ content }}
</p>

Examples

Errors

We'll never share your email.

Invalid email 

{% set error=True %}
{% set error_message="Invalid email" %}

<Form method="GET" action="">
  <FormItem id="email-field">
    <FormLabel htmlFor="emalocil" :error="{{ error }}">Email Address</FormLabel>
    <Input
        id="email"
        type="email"
        value="not@email"
        :error="{{ error }}"
    />
    <FormDescription id="email-description">We'll never share your email.</FormDescription>
    <FormMessage id="email-message" :error="{{ error }}">{{ error_message }}</FormMessage>
  </FormItem>
  <Button type="submit">Submit</Button>
</Form>