Fields
Style elements like inputs. Labels, hints, descriptions and errors can be added to the field. This is very useful if you want to create custom fields which look like the default inputs.
Content
1<x-field label="Label">2 <div class="bg-gray-100 px-3 py-2 radius-3">Content</div>3</x-field>Hint
Add a hint to the field by using the hint attribute.
A hint for the field
Content
1<x-field label="Label" hint="A hint for the field">2 <div class="bg-gray-100 px-3 py-2 radius-3">Content</div>3</x-field>Description
Add a description to the field by using the description attribute.
Content
Describe the field with the description attribute
1<x-field label="Label" description="Describe the field with the description attribute">2 <div class="bg-gray-100 px-3 py-2 radius-3">Content</div>3</x-field>Label Addon
Add an addon to the label by using the label-addon attribute.
Content
1<x-field label="Label">2 <x-slot:labelAddon>3 <x-button type="link" size="sm">My Addon</x-button>4 </x-slot:labelAddon>5 6 <div class="bg-gray-100 px-3 py-2 radius-3">Content</div>7</x-field>Errors
Add an error to the field by connecting the field to a model using the wire:model attribute. If an error exists, the .field element will have the class .has--error.
The wire:model won't actually be placed as an attribute to any element. It's just used to connect the field to the model.
Content
This is an error message
1<x-field label="Label" wire:model="error_example">2 <div class="bg-gray-100 px-3 py-2 radius-3">Content</div>3</x-field>