Forms

Every field binds with wire:model, surfaces validation errors automatically and adapts to the active realm. Try the live form first: it validates as you type.

Tables Elements

Live validated form #

Real-time validation with Livewire: errors appear after you leave a field and clear as soon as the value is fixed.

Full name

Password

At least 8 characters.

Primary role

Skills

Pick skills

No results found.

Short bio

Up to 500 characters.

Live state

$name: none
$email: none
$role: developer
$skills: laravel, livewire

<form wire:submit="submit">
                <x-duro::input name="email" type="email" label="Email" icon="mail" wire:model.blur="email" />
                <x-duro::input name="password" type="password" label="Password" wire:model.blur="password" />
                <x-duro::select name="role" label="Primary role" wire:model.live="role" :options="$roles" />
                <x-duro::multi-select label="Skills" wire:model.live="skills" :options="$skillOptions" />

                <x-duro::button type="submit" loading="submit">Validate & save</x-duro::button>
            </form>

Choices & toggles #

Checkboxes, checkbox cards, radios, switches, segmented toggle buttons and a range slider.

Receive product updates One email per month, no spam.

Enhanced visual mode

Adds extra glow and motion.

Complexity preference

Casual Standard Soulslike

Layout

Focus areas

HR systems Content management Church systems Analytics

Complexity

1 10

newsletter=true · visual=off · difficulty=standard · layout=grid · focus=[hrms] · complexity=6

<x-duro::switch wire:model.live="notifications" label="Email notifications" />
            <x-duro::checkbox-list label="Focus areas" wire:model.live="focusAreas" :options="$areas" />
            <x-duro::toggle-buttons wire:model.live="layout" :options="['grid' => 'Grid', 'list' => 'List']" />
            <x-duro::slider label="Complexity" wire:model.live="complexity" :min="1" :max="10" />

Date & time #

Calendar, time and combined pickers with year jumping and quick actions.

Launch date

Select Year

Daily stand-up

Select time

Hour

Minute

Period

Selected:

Next deployment

Time

Hour

Minute

Period

Selected:

Select Year

date=none · time=none · datetime=none

<x-duro::date-picker label="Launch date" wire:model.live="deployDate" />
            <x-duro::time-picker label="Daily stand-up" wire:model="standupTime" />
            <x-duro::date-time-picker label="Next deployment" wire:model="deployAt" />

Rich content #

Markdown with live preview, a WYSIWYG editor and a code editor.

Project brief (Markdown)

Release notes

Duro TipTap-style

Initialization script

PHP • Code editor

Structured data & files #

Tags, colour, key-value pairs, drag-and-drop uploads, repeaters and a block builder.