Form Components
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.open>
</x-form.open>
The method and actions can be passed:
<x-form.open method='delete' action='delete-comment'>
</x-form.open>
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'></x-form.input>
Outputs:
<div>
<label for='username'>Username</label>
<input type='text' name='username' id='username' value=''>
</div>
```php
**Use a label**
```php
<x-form.input name='username' label='Username'></x-form.input>
Use an id and a class
<x-form.input name='username' label='Username' id='username' class='form-input'></x-form.input>
Set the type
The type is set to test by default, it can be changed
<x-form.input name='password' type='password'></x-form.input>
Set the input value
<x-form.input name='username' label='Username'>{{ $username }}</x-form.input>
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>
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 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>
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>
<x-form.radio name='result' label='Lost' value='Lost'></x-form.radio>
<x-form.radio name='result' label='Draw' value='Draw'></x-form.radio>
Pass a value that will check the matching radio.
<x-form.radio name='result' label='Won' value='Won'>{{ $result }}</x-form.radio>
<x-form.radio name='result' label='Lost' value='Lost'>{{ $result }}</x-form.radio>
<x-form.radio name='result' label='Draw' value='Draw'>{{ $result }}</x-form.radio>
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>
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
@php
$options = [1 => 'one', 2 => 'two', 3 => 'three'];
@endphp
<x-form.select name='types' placeholder='Select'>
@foreach($options as $key => $value)
<x-form.selectoption key='{{ $key }}' value='{{ $value }}'></x-form.selectoption>
@endforeach
</x-form.select>
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>