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.

Basic Usage

<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>

Inline 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>

Error Handling

<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>