Demo: Form Group
The form group component can be used to encapsulate an input in order to render a label and error messages automatically for you.
<x-form-group label="First name"
name="first_name"
input-id="basic-usage-demo"
>
<x-input name="first_name"
id="basic-usage-demo"
/>
</x-form-group>
<x-form-group label="First name"
name="first_name"
input-id="inline-group-demo"
inline
>
<x-input name="first_name"
id="inline-group-demo"
/>
</x-form-group>
<x-form-group label="Last name"
name="last_name"
input-id="inline-group-last-name"
inline
>
<x-input name="last_name"
id="inline-group-last-name"
/>
</x-form-group>
Optional
Last name only
<x-form-group label="First name"
name="first_name"
input-id="hint-demo"
optional
>
<x-input name="first_name"
id="hint-demo"
/>
</x-form-group>
<x-form-group label="Last name"
name="last_name"
input-id="hint-last-name"
inline
hint="Last name only"
>
<x-input name="last_name"
id="hint-last-name"
/>
</x-form-group>
Some helpful text here.
<x-form-group label="First name"
name="first_name"
input-id="help-text-demo"
inline
>
<x-input name="first_name"
id="help-text-demo"
/>
<x-slot name="helpText">
Some <span class="font-semibold">helpful</span> text here.
</x-slot>
</x-form-group>