This means, if you want to use all components, grab the forms folders in bl and scss. Otherwise, go into those folders and take what you need.
Note: You will need to change the path to the component if you do this a la cart, unless you use them from within a folder called 'forms.
E.g.: <x-bl.forms.label-text-input...' where the '.forms' here means the label-text-input is found inside /bl/forms/
This is the code to generate the form below (assume a $model with the properties listed):
<!-- Form example -->
<x-bl.form.form route="{{ route('form-post') }}" method="POST">
<!-- Required note example with class adjustments -->
<x-bl.form.required-note classNames="inline-block mb1" />
<!-- Text input w/ and w/o 'required' example -->
<x-bl.form.label-text-input name="name" type="text" value="{{ optional($model ?? '' )->name }}" required=true />
<x-bl.form.label-text-input name="last_name" type="text" placeholder="Enter your last name" value="{{ optional($model ?? '' )->last_name }}" />
<!-- Text input as email example -->
<x-bl.form.label-text-input name="email" type="email" value="{{ optional($model ?? '' )->email }}" />
<!-- Textarea examples w/ and w/o 'required' -->
<x-bl.form.label-textarea-input name="description">{{ optional($model ?? '' )->description }}</x-bl.form.label-textarea-input>
<x-bl.form.label-textarea-input name="excuses" required=true>;{{ optional($model ?? '' )->excuses }}</x-bl.form.label-textarea-input>
<!-- Select examples (inside a box example) -->
<x-bl.box>;
<x-bl.h4>Select options</x-bl.h4>
<x-bl.h5>Single select</x-bl.h5>
<!-- Example with all options visible on load -->
<x-bl.form.select name="simple_choice" :options=$optionsSimple selected="{{ optional($model ?? '')->simple_choice }}" />
<!-- Example with a blank option on load -->
<x-bl.form.select classNames="mt1" name="simple_choice_with_blank" :options=$optionsSimple selected="{{ optional($model ?? '')->simple_choice_with_blank }}" blank=true />
<!-- Example with all options as key => value pairs -->
<x-bl.form.select classNames="mt1" name="key_value_options" :options=$optionsKeyValue is_kv=true selected="{{ optional($model ?? '')->key_value_options }}" />
<!-- Example with all options as key => value pairs with blank -->
<x-bl.form.select classNames="mt1" name="key_value_options_with_blank" :options=$optionsKeyValue is_kv=true selected="{{ optional($model ?? '')->key_value_options_with_blank }}" blank=true />
<!-- Multiple Select example with simple options -->
<!-- IMPORTANT: notice how selected prop is formed & multiple prop is required -->
<x-bl.form.select name="simple_choice_multiple" :options=$optionsSimple :selected="collect( optional($model ?? [])->simple_choice_multiple )" multiple=true />
<!-- Example with blank=true prop -->
<x-bl.form.select classNames="mt1" name="simple_choice_multiple_with_blank" :options=$optionsSimple :selected="collect( optional($model ?? [])->simple_choice_multiple_with_blank )" multiple=true blank=true />
<!-- Note: only simple options work in multiple select fields -->
</x-bl.box>
<!-- Checkbox box utliity example -->
<div class="bl-checkbox-box">
<!-- Checkbox examples -->
<x-bl.form.label-checkbox-input name="enabled" value="{{ optional($model ?? '')->enabled }}" />
<x-bl.form.label-checkbox-input name="is_admin" value="{{ optional($model ?? '')->is_admin }}" />
</div>
<x-bl.h5>Ice cream flavors</x-bl.h5>
<!-- Radio inputs example -->
<x-bl.form.label-radio-inputs name="choice" :items=$choices checked="{{ optional($model ?? '')->choice }}" />
<!-- Switch example -->
<x-bl.form.label-switch-input name="play_sound" value="{{ optional($model ?? '')->play_sound }#125;" /&g;
<!-- Button box example with cancel button+route and save -->
<div class="bl-button-box">
<x-bl.button route="{{ route('index') }}" type="cancel" classNames="cancel">>Cancel</x-bl.button>
<x-bl.button classNames="save">Save</x-bl.button>
</div>
</x-bl.form.form>