Sigta UI · Kit

Input

Basic

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

With description

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

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

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

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

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>

Inline (a value in a detail view)

Title Owner Line Bak
Source 
<div class="grid max-w-md grid-cols-[7rem_1fr] items-center gap-x-4 gap-y-1">
        <span class="font-mono text-[0.68rem] uppercase tracking-[0.08em] text-graphite">Title</span>
        <sigta:input variant="inline" aria-label="Title" placeholder="Untitled" value="Launch the site" />
        <span class="font-mono text-[0.68rem] uppercase tracking-[0.08em] text-graphite">Owner</span>
        <span class="font-body text-[0.98rem] text-ink">Line Bak</span>
    </div>