Field

A wrapper component for form fields with label, input, and error message.

Default

With Description

This is your public display name.

With Error

Password must be at least 8 characters.

Horizontal Layout

You agree to our Terms of Service and Privacy Policy.

Form Example

We'll never share your email.

Please enter a valid phone number.

Usage

<twig:Field>
    <twig:Label for="email">Email</twig:Label>
    <twig:Input id="email" type="email" />
    <p>Description text</p>
</twig:Field>

<twig:Field :invalid="true">
    <twig:Label for="password">Password</twig:Label>
    <twig:Input id="password" :invalid="true" />
    <div role="alert">Error message</div>
</twig:Field>

<twig:Field orientation="horizontal">
    <twig:Checkbox id="terms" />
    <section>
        <twig:Label for="terms">Accept terms</twig:Label>
        <p>Description</p>
    </section>
</twig:Field>