Sigta UI · Kit

Date Picker

Basic

Source 
<div class="max-w-sm">
        <sigta:date-picker label="Due date" name="due" placeholder="Pick a date" />
    </div>

Pre-filled value

Source 
<div class="max-w-sm">
        <sigta:date-picker label="Kickoff" name="kickoff" value="2026-07-09" />
    </div>

With description

Type a date or pick one from the calendar.

Source 
<div class="max-w-sm">
        <sigta:date-picker label="Invoice date" name="invoice" value="2026-07-09"
            description="Type a date or pick one from the calendar." />
    </div>

Bounded (min/max)

Source 
<div class="max-w-sm">
        <sigta:date-picker label="Delivery window" name="delivery"
            value="2026-07-15" min="2026-07-06" max="2026-07-24" />
    </div>

Error

Choose a start date.

Source 
<div class="max-w-sm">
        <sigta:date-picker label="Start date" name="start" error="Choose a start date." />
    </div>

Disabled

Source 
<div class="max-w-sm">
        <sigta:date-picker label="Locked" name="locked" value="2026-07-09" disabled />
    </div>

Inline (a value in a detail view)

Due date
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">Due date</span>
        <sigta:date-picker variant="inline" aria-label="Due date" placeholder="No due date" />
        <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>