Input — Sigta UI

Basic

Project name

Source

<div class="max-w-sm">
        <sigta:input label="Project name" value="Marginalia v3" />
    </div>

With description

Email

We only use this for the invoice.

Source

<div class="max-w-sm">
        <sigta:input label="Email" type="email" placeholder="you@studio.co" description="We only use this for the invoice." />
    </div>

Error

Project name

A project needs a name.

Source

<div class="max-w-sm">
        <sigta:input label="Project name" value="" error="A project needs a name." />
    </div>

With leading icon

Search

Email

Source

<div class="flex max-w-sm flex-col gap-4">
        <sigta:input label="Search" icon="search" placeholder="Search engagements…" />
        <sigta:input label="Email" icon="mail" type="email" placeholder="you@studio.co" />
    </div>

Types

Password

Kickoff date

Seats

Source

<div class="flex max-w-sm flex-col gap-4">
        <sigta:input label="Password" type="password" value="hunter2sigta" />
        <sigta:input label="Kickoff date" type="date" />
        <sigta:input label="Seats" type="number" value="4" />
    </div>

Disabled

Engagement id

Source

<div class="max-w-sm">
        <sigta:input label="Engagement id" value="SGT-2026-014" disabled />
    </div>

Bare (no field chrome)

Source

<div class="max-w-sm">
        <sigta:input placeholder="Quick note…" aria-label="Quick note" />
    </div>