Form Components

Form
Input
Textarea
Checkbox
Radio
Select
Button

All form components accept option parameters that such as class='' style=''

When the method is set to PUT, PATCH or DELETE the method() will be applied automatically.

Form

Defaults to post method and CSRF token

<x-form>

</x-form>

The method and actions can be passed:

<x-form method='delete' action='delete-comment'>

</x-form>

Form input

Create an input with a name, the name will be used as the label as long as the label is not provided.

<x-form.input name='username' />

Outputs:

<div>
    <label for='username'>Username</label>
    <input type='text' name='username' id='username' value='' />
</div>

Use a label

<x-form.input name='username' label='Username' />

Use an id and a class

<x-form.input name='username' label='Username' id='username' class='form-input' />

The type is set to text by default, it can be changed

<x-form.input name='password' type='password' />

Set the input value

<x-form.input name='username' label='Username'>{{ $username }}</x-form.input>

Form textarea

<x-form.textarea name='comments'></x-form.textarea>

Set the rows and columns

<x-form.textarea name='comments' cols='10' rows='10'></x-form.textarea>

Set the textarea data

<x-form.textarea name='comments' cols='10' rows='10'>{{ $comments }}</x-form.textarea>

Form Checkbox

A checkbox can also be defined, set the name and value

<x-form.checkbox name='terms' value='1'></x-form.checkbox>

Check the checkbox by passing its value, as long its a match the checkbox will be checked.

<x-form.checkbox name='terms' value='1'>1</x-form.checkbox>

Or

<x-form.checkbox name='terms' value='1'>{{ $terms }}</x-form.checkbox>

Form Radio

A radio can also be defined, set the name, label and value

<x-form.radio name='result' label='Won' value='Won'/>
<x-form.radio name='result' label='Lost' value='Lost'/>
<x-form.radio name='result' label='Draw' value='Draw'/>

Pass a value which will check the matching radio.

<x-form.radio name='result' label='Won' value='{{ $result }}'/>
<x-form.radio name='result' label='Lost' value='{{ $result }}'/>
<x-form.radio name='result' label='Draw' value='{{ $result }}'/>

Check the checkbox by passing its value, as long it's a match the checkbox will be checked.

<x-form.checkbox name='terms' value='1'>1</x-form.checkbox>

Or

<x-form.checkbox name='terms' value='1'>{{ $terms }}</x-form.checkbox>

Form select

create a select menu set the name and placeholder for the initial option

<x-form.select name='types' placeholder='Select'>

</x-form.select>

Leave off the placeholder to have only the select and options that can be selected

<x-form.select name='types'>

</x-form.select>

In order to set the option an array is needed and is looped over and then a nested component is used.

Pass in the key and value from the array

<x-form.select name='types'>

    <?php $options = [1 => 'one', 2 => 'two', 3 => 'three']; ?>

    <x-form.select name='types' placeholder='Select'>
        @foreach($options as $key => $value)
            <x-form.select-option key='{{ $key }}' value='{{ $value }}' />
        @endforeach
    </x-form.select>

</x-form.select>

Form button

Create a button, defaults to a submit type

<x-form.button name='submit'>Submit</x-form.button>

Create a button, using only the defaults and a label

<x-form.button>Submit</x-form.button>

Example:

<x-form method="get">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>

            <x-form.input name="name">{{ old('name', 'Dave') }}</x-form.input>

            <x-form.select name="gender">
                <x-form.select-option value="">Select</x-form.select-option>
                <x-form.select-option value="male" selected="male">Male</x-form.select-option>
                <x-form.select-option value="female">Female</x-form.select-option>
            </x-form.select>

            <x-form.checkbox name="checkbox" label="Agree to terms" checked="true" />

        </div>

        <div>

            <x-form.input name="image" type="file"></x-form.input>

            <x-form.group label="T-shirt Size">
                <x-form.radio name="size" id="s1" label="Small" value="sm"></x-form.radio>
                <x-form.radio name="size" id="s2" label="Medium" value="md"></x-form.radio>
                <x-form.radio name="size" id="s3" label="Large" value="lg"></x-form.radio>
                <x-form.radio name="size" id="s4" label="XL" value="xl"></x-form.radio>
                <x-form.radio name="size" id="s5" label="XXL" value="xxl"></x-form.radio>
            </x-form.group>

        </div>
    </div>

    <hr/>

    <h3>Date and Time pickers</h3>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

        <div>
            <x-form.date name="date" label="Date"></x-form.date>
            <x-form.daterange name="daterange" label="Date Range"></x-form.daterange>
            <x-form.datetime name="datetime" label="Date Time"></x-form.datetime>
        </div>

        <div>
            <x-form.time name="time" label="Time"></x-form.time>
            <x-form.timeday name="timeday" label="Time Day between 08:00 and 18:00 "></x-form.timeday>
        </div>

    </div>

    <hr/>

    <x-form.textarea name="comments"></x-form.textarea>

    <x-form.submit>Submit</x-form.submit>

</x-form>