A switch form element (utilising the Laravel Collective custom component feature to componentise and Bootstrap for themeing).
- Add to
AppServiceProvider@boot()
the component definition:
\Form::component('switch', 'templates._switch-partial', ['name', 'value', 'label', 'text' => ['Yes', 'No'], 'color' => 'success', 'attributes' => []]);
- Include the _switch-partial.blade.php blade file to /resources/views/templates/
{{ Form::switch(name, value, label, text, theme, attributes) }}
[string] name
Names the input element and the value to check upon form submission.
[string] value
This is the value which will be sent on form submission. Important: The truthiness of the value determines the state of the switch.
[string] label
The text which will sit next to (generally to the left of) the switch component. Use the class
.control-label
to style (eg,display:block
forces the label to be on a different line than the switch. This value is not escaped by Laravel so HTML is permissable here.
[array] text
Must be an array of two values - the "on" text and "off" text. ie,
['Yes', 'No']
[string] theme
Determines the colours used on the switch. This value must be one of the available Bootstrap theme keywords. (some show better than others!).
Theme | Hex |
---|---|
Primary | #007BFF |
Secondary | #FFC107 |
Success | #17A2B8 |
Danger | #DC3545 |
Warning | #343A40 |
Info | #17A2B8 |
Light | #FFFFFF |
Dark | #000000 |
(the hex values will differ if you've customised your Bootstrap) |
[array] attributes
Any remaining HTML element attributes - these will be added to the form element in the switch. To access/change any other elements which make up the switch use the classes defined below.
Element | Class |
---|---|
Surrounding DIV | .switch-component |
LABEL | .control-label |
INPUT | .switch-input |
Handle | .switch-hanle |
On/off label | .switch-label |
{{ Form::switch('online_store', $store->online, 'Online Store?', ['Yes', 'No'], 'success', ['class' => 'online_class']) }}