Field

Build accessible forms with field validation, labels, descriptions, and error handling.

This is your public display name.

<twig:ui:Field class="w-full max-w-sm">
    <twig:ui:Field:Label for="username">Username</twig:ui:Field:Label>
    <twig:ui:Input id="username" placeholder="shadcn" />
    <twig:ui:Field:Description>This is your public display name.</twig:ui:Field:Description>
</twig:ui:Field>

Usage

<twig:ui:Field class="w-full max-w-sm">
    <twig:ui:Field:Label for="email">Email</twig:ui:Field:Label>
    <twig:ui:Input id="email" type="email" placeholder="[email protected]" />
</twig:ui:Field>

Examples

Group

<twig:ui:Field:Group class="grid max-w-sm grid-cols-2">
    <twig:ui:Field>
        <twig:ui:Field:Label for="field-group-first-name">First Name</twig:ui:Field:Label>
        <twig:ui:Input id="field-group-first-name" placeholder="Jordan" />
    </twig:ui:Field>
    <twig:ui:Field>
        <twig:ui:Field:Label for="field-group-last-name">Last Name</twig:ui:Field:Label>
        <twig:ui:Input id="field-group-last-name" placeholder="Lee" />
    </twig:ui:Field>
</twig:ui:Field:Group>

Horizontal

<twig:ui:Field orientation="horizontal">
    <twig:ui:Checkbox id="marketing" />
    <twig:ui:Field:Label for="marketing">Send me marketing emails</twig:ui:Field:Label>
</twig:ui:Field>

Description

Write a short introduction for your profile.

<twig:ui:Field class="w-full max-w-sm">
    <twig:ui:Field:Label for="bio">Bio</twig:ui:Field:Label>
    <twig:ui:Input id="bio" placeholder="I'm a software engineer..." />
    <twig:ui:Field:Description>Write a short introduction for your profile.</twig:ui:Field:Description>
</twig:ui:Field>

Invalid

<twig:ui:Field data-invalid="true" class="w-full max-w-sm">
    <twig:ui:Field:Label for="username-invalid">Username</twig:ui:Field:Label>
    <twig:ui:Input id="username-invalid" aria-invalid="true" value="sh" />
    <twig:ui:Field:Error>Username must be at least 3 characters.</twig:ui:Field:Error>
</twig:ui:Field>

Disabled

<twig:ui:Field data-disabled="true" class="w-full max-w-sm">
    <twig:ui:Field:Label for="username-disabled">Username</twig:ui:Field:Label>
    <twig:ui:Input id="username-disabled" disabled placeholder="shadcn" />
</twig:ui:Field>

API Reference

<twig:ui:Field>

Prop Type Description
orientation 'vertical' | 'horizontal' | 'responsive' The layout direction of the field. Defaults to vertical

<twig:ui:Field:Label>

Wraps <twig:ui:Label> with field-aware spacing and disabled/checked states.

<twig:ui:Field:Content>

Groups the input and supplementary elements like Field:Description and Field:Error, used in horizontal orientation.

<twig:ui:Field:Group>

Groups multiple Field components together.

<twig:ui:Field:Description>

The helper text describing the field.

<twig:ui:Field:Error>

Prop Type Description
errors array A list of error messages (strings or objects with a message property)

Renders nothing when there is no content and no errors.