Wire
UI
Pedro shared the wire-ui.png file with you.
3 min ago • WireUI
Drop your files here or browse
Max size: 50MB
Wire
UI
composer require wireui/wireui
1<x-card class="px-5 py-2" title="Personal Information" secondary> 2 <x-errors class="mb-4" /> 3 4 <div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> 5 <x-input label="First Name" placeholder="First Name" wire:model="form.first_name" /> 6 7 <x-input label="Last Name" placeholder="Last Name" wire:model="form.last_name" /> 8 9 <div class="col-span-1 space-y-6 sm:col-span-2 sm:grid sm:grid-cols-7 sm:gap-5 sm:space-y-0">10 <div class="col-span-1 sm:col-span-4">12 </div>13 14 <div class="col-span-1 sm:col-span-3">15 <x-phone label="Phone" placeholder="Phone" wire:model="form.phone" />16 </div>17 </div>18 19 <x-select label="Country" placeholder="Country" wire:model="form.country" :options="$countries" />20 21 <x-datetime-picker label="Birthdate" placeholder="Birthdate" wire:model="form.birthdate" />22 23 <div class="col-span-1 sm:col-span-2">24 <x-input label="Street Address" placeholder="Street Address" wire:model="form.street" />25 </div>26 27 <div class="col-span-1 space-y-6 sm:space-y-0 sm:col-span-2 sm:grid sm:grid-cols-3 sm:gap-6">28 <x-input label="City" placeholder="City" wire:model="form.city" />29 30 <x-input label="State" placeholder="State" wire:model="form.state" />31 32 <x-input label="Postal Code" placeholder="Postal Code" wire:model="form.postal_code" />33 </div>34 35 <x-toggle label="Accept the terms and conditions" wire:model="form.terms" />36 </div>37 38 <x-slot name="footer" class="flex items-center justify-end gap-x-3">39 <x-button wire:click="cancel" label="Cancel" teal flat />40 41 <x-button wire:click="save" label="Save" spinner="save" teal />42 </x-slot>43</x-card>