logo
v2.4.5

Toggle

Display a toggle input. Under the hood, the toggle component is a checkbox spiced up nicely.

        
            <x-bladewind.toggle  />
        
    

You can display the toggle component with a label that can be positioned either on the left or right of the component. The default position is left but can easily be flipped to the right by setting the attribute label_position="right". Clicking on the label toggles the component.

        
            <x-bladewind.toggle label="Send me quarterly newsletters"  />
        
    

        
            <x-bladewind.toggle
                label="Send me quarterly newsletters"
                label_position="right"  />
        
    

The toggle component by default is displayed as an inline-flex element to enable you sit multiple toggles side by side. If you prefer your toggles to fill up their parent containers and be justified with the label, set justified="true".

        
            <x-bladewind.toggle
                label="Send me quarterly newsletters"
                justified="true"  />
        
    

Thin and Thicker Bars

The toggle component can have a thinner bar like is seen on most Android devices and thicker bar as seen on iOS. Set bar="thin" or bar="thicker". The default bar is set at bar="thick".

        
            <x-bladewind.toggle
                label="Send me quarterly newsletters"
                bar="thin"  />
        
    

        
            <x-bladewind.toggle
                label="Send me quarterly newsletters"
                bar="thicker"  />
        
    

Checked and Disabled

The toggle component can be checked and/or disabled by default. To check the component set checked="true". To mark the toggle as disabled, set disabled="true".

        
            <x-bladewind.toggle
                checked="true"
                label="I am checked at birth" />
        
    

        
            <x-bladewind.toggle
                disabled="true"
                label="I am checked at birth" />
        
    

        
            <x-bladewind.toggle
                checked="true" disabled="true"
                label="I am checked at birth" />
        
    

Different Colours

There are nine colours to pick from when the toggle component is active or checked. To set your preferred colour set the color attribute.

                          

<x-bladewind.toggle color="red" />

<x-bladewind.toggle color="yellow" />

<x-bladewind.toggle color="green" />

<x-bladewind.toggle color="pink" />

<x-bladewind.toggle color="cyan" />

<x-bladewind.toggle color="gray" />

<x-bladewind.toggle color="purple" />

<x-bladewind.toggle color="orange" />

<x-bladewind.toggle color="blue" />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Toggle component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
name bw-toggle Unique name to identify the component and access its value when submitted.
label blank Clickable label to display next to the toggle component
label_position left Specifies where the label should be positioned.
left right
disabled false Specifies if the toggle is disabled or not.
true false
checked false Specifies if the toggle is checked or not.
true false
color primary There are nine colors to choose from.
red yellow green blue pink cyan purple gray orange
justified false Specifies if the label and toggle are spread out to evenly fill up the parent container.
true false
bar thick Specifies the size for the slider bar.
thin thick thicker
onclick javascript:void(0) Javascript function to call when the toggle is clicked. This is fired both when the toggle is checked or not. You will need to programmatically determine if the toggle is checked or not.

Toggle with all attributes defined

        
            <x-bladewind.toggle
                color="purple"
                label="Send me quarterly newsletters"
                label_position="right"
                name="subscribe"
                justified="false"
                disabled="false"
                bar="thin"
                checked="false"
                onclick="alert('hey there')" />
        
    
The source file for this component is available in resources > views > components > bladewind > toggle.blade.php