Input

Text input field with validation states and focus styling.

Your API key is encrypted and stored securely.

<div class="w-full max-w-xs">
    <twig:ui:Field>
        <twig:ui:Field:Label for="input-demo-api-key">API Key</twig:ui:Field:Label>
        <twig:ui:Input id="input-demo-api-key" type="password" placeholder="sk-..." />
        <twig:ui:Field:Description>Your API key is encrypted and stored securely.</twig:ui:Field:Description>
    </twig:ui:Field>
</div>

Usage

<twig:ui:Input placeholder="Enter text" class="max-w-xs" />

Examples

With label

Choose a unique username for your account.

<div class="w-full max-w-xs">
    <twig:ui:Field>
        <twig:ui:Field:Label for="input-field-username">Username</twig:ui:Field:Label>
        <twig:ui:Input id="input-field-username" type="text" placeholder="Enter your username" />
        <twig:ui:Field:Description>Choose a unique username for your account.</twig:ui:Field:Description>
    </twig:ui:Field>
</div>

Field group

We'll send updates to this address.

<div class="w-full max-w-xs">
    <twig:ui:Field:Group>
        <twig:ui:Field>
            <twig:ui:Field:Label for="fieldgroup-name">Name</twig:ui:Field:Label>
            <twig:ui:Input id="fieldgroup-name" placeholder="Jordan Lee" />
        </twig:ui:Field>
        <twig:ui:Field>
            <twig:ui:Field:Label for="fieldgroup-email">Email</twig:ui:Field:Label>
            <twig:ui:Input id="fieldgroup-email" type="email" placeholder="[email protected]" />
            <twig:ui:Field:Description>We'll send updates to this address.</twig:ui:Field:Description>
        </twig:ui:Field>
        <twig:ui:Field orientation="horizontal">
            <twig:ui:Button type="reset" variant="outline">Reset</twig:ui:Button>
            <twig:ui:Button type="submit">Submit</twig:ui:Button>
        </twig:ui:Field>
    </twig:ui:Field:Group>
</div>

Grid

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

Search

<div class="w-full max-w-xs">
    <twig:ui:Field orientation="horizontal">
        <twig:ui:Input type="search" placeholder="Search..." />
        <twig:ui:Button>Search</twig:ui:Button>
    </twig:ui:Field>
</div>

Required

This field must be filled out.

<div class="w-full max-w-xs">
    <twig:ui:Field>
        <twig:ui:Field:Label for="input-required">
            Required Field <span class="text-red-600 dark:text-red-500">*</span>
        </twig:ui:Field:Label>
        <twig:ui:Input id="input-required" placeholder="This field is required" required />
        <twig:ui:Field:Description>This field must be filled out.</twig:ui:Field:Description>
    </twig:ui:Field>
</div>

With badge

<div class="w-full max-w-xs">
    <twig:ui:Field>
        <twig:ui:Field:Label for="input-badge">
            Webhook URL
            <twig:ui:Badge variant="outline" class="ml-auto">Beta</twig:ui:Badge>
        </twig:ui:Field:Label>
        <twig:ui:Input id="input-badge" type="url" placeholder="https://api.example.com/webhook" />
    </twig:ui:Field>
</div>

Disabled

This field is currently disabled.

<div class="w-full max-w-xs">
    <twig:ui:Field data-disabled="true">
        <twig:ui:Field:Label for="input-demo-disabled">Email</twig:ui:Field:Label>
        <twig:ui:Input id="input-demo-disabled" type="email" placeholder="Email" disabled />
        <twig:ui:Field:Description>This field is currently disabled.</twig:ui:Field:Description>
    </twig:ui:Field>
</div>

Invalid

This field contains validation errors.

<div class="w-full max-w-xs">
    <twig:ui:Field data-invalid="true">
        <twig:ui:Field:Label for="input-invalid">Invalid Input</twig:ui:Field:Label>
        <twig:ui:Input id="input-invalid" placeholder="Error" aria-invalid="true" />
        <twig:ui:Field:Description>This field contains validation errors.</twig:ui:Field:Description>
    </twig:ui:Field>
</div>

File

Select a picture to upload.

<div class="w-full max-w-xs">
    <twig:ui:Field>
        <twig:ui:Field:Label for="picture">Picture</twig:ui:Field:Label>
        <twig:ui:Input id="picture" type="file" />
        <twig:ui:Field:Description>Select a picture to upload.</twig:ui:Field:Description>
    </twig:ui:Field>
</div>

RTL

مفتاح API الخاص بك مشفر ومخزن بأمان.

קוד ה-API שלך מוצן ומאוחסן בצורה מאובטחת.

<div class="flex w-full flex-col items-center gap-8">
    <div dir="rtl" class="w-full max-w-xs">
        <twig:ui:Field>
            <twig:ui:Field:Label for="input-rtl-ar">مفتاح API</twig:ui:Field:Label>
            <twig:ui:Input id="input-rtl-ar" type="password" placeholder="sk-..." />
            <twig:ui:Field:Description>مفتاح API الخاص بك مشفر ومخزن بأمان.</twig:ui:Field:Description>
        </twig:ui:Field>
    </div>
    <div dir="rtl" class="w-full max-w-xs">
        <twig:ui:Field>
            <twig:ui:Field:Label for="input-rtl-he">קוד API</twig:ui:Field:Label>
            <twig:ui:Input id="input-rtl-he" type="password" placeholder="sk-..." />
            <twig:ui:Field:Description>קוד ה-API שלך מוצן ומאוחסן בצורה מאובטחת.</twig:ui:Field:Description>
        </twig:ui:Field>
    </div>
</div>

API Reference

<twig:ui:Input>

Renders a native <input> element; any HTML attribute (type, placeholder, disabled, aria-invalid, ...) is passed through.