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>