Laravel Blade Components

Laravel Blade components collection

Re-usable Laravel Blade components for your projects

Installation

You can install the package via composer:

composer require dcblogdev/laravel-blade-components

Usage

Form components

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

Open

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>

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'></x-form.input>

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'></x-form.input>

Use an id and a class

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

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>

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>

<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>
<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 which 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 its a match the checkbox will be checked.

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

<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

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

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>

Laravel Blade Components