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.
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.
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.
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 with the labelAddon slot (or the camelCase labelAddon attribute). The kebab-case label-addon attribute is ignored by the component.
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.
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>Subtle
<x-field> accepts subtle as well, but it only adds the class field--subtle to the wrapper. The tinted background of subtle inputs (see Text Inputs) is not applied to your content inside .field__content.