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>