Sigta UI · Kit

Field

Field wrapping a custom control

How compact the tables render.

Source 
<div class="max-w-sm">
        <sigta:field label="Density" description="How compact the tables render.">
            <div class="flex flex-col gap-2">
                <sigta:radio name="kit-field-density" label="Comfortable density" checked />
                <sigta:radio name="kit-field-density" label="Compact density" />
            </div>
        </sigta:field>
    </div>

Explicit for/id wiring

Shown on invoices and reports.

Source 
<div class="max-w-sm">
        <sigta:field label="Project name" description="Shown on invoices and reports." for="kit-field-custom">
            <sigta:input id="kit-field-custom" value="Marginalia v3" />
        </sigta:field>
    </div>

Error state

Pick a workspace before continuing.

Source 
<div class="max-w-sm">
        <sigta:field label="Workspace" error="Pick a workspace before continuing." for="kit-field-error">
            <sigta:select id="kit-field-error">
                <option value="">—</option>
                <option>Marginalia</option>
                <option>Plumb</option>
            </sigta:select>
        </sigta:field>
    </div>

Standalone label

Source 
<sigta:label for="kit-label-target">Engagement type</sigta:label>