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>