Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Toggles

If you need something more fancy than the standard checkbox, you can use the toggle component. It's a great way to get a yes or no answer from your users. Most of them probably won't even growl at you!

Using Toggles

Create a toggle with the <ui:toggle> tag. Bind it to your data with wire:model or by using the checked property.

Copied!
 
 1<label class="flex items-center space-x-2">
 2    <ui:toggle color="primary" />
 3    <span>Yes, or no?</span>
 4</label>
 5 
 6<label class="flex mt-4 items-center space-x-2">
 7    <ui:toggle :checked="true" color="primary" />
 8    <span>Yes, or no?</span>
 9</label>
10 
11<label class="flex mt-4 items-center space-x-2">
12    <ui:toggle :checked="true" color="secondary" />
13    <span>Yes, or no?</span>
14</label>
15 
16<label class="flex mt-4 items-center space-x-2">
17    <ui:toggle :checked="true" color="success" />
18    <span>Yes, or no?</span>
19</label>
20 
21<label class="flex mt-4 items-center space-x-2">
22    <ui:toggle :checked="true" color="warning" />
23    <span>Yes, or no?</span>
24</label>
25 
26<label class="flex mt-4 items-center space-x-2">
27    <ui:toggle :checked="true" color="danger" />
28    <span>Yes, or no?</span>
29</label>
 1<label class="flex items-center space-x-2">
 2    <ui:toggle color="primary" />
 3    <span>Yes, or no?</span>
 4</label>
 5 
 6<label class="flex mt-4 items-center space-x-2">
 7    <ui:toggle :checked="true" color="primary" />
 8    <span>Yes, or no?</span>
 9</label>
10 
11<label class="flex mt-4 items-center space-x-2">
12    <ui:toggle :checked="true" color="secondary" />
13    <span>Yes, or no?</span>
14</label>
15 
16<label class="flex mt-4 items-center space-x-2">
17    <ui:toggle :checked="true" color="success" />
18    <span>Yes, or no?</span>
19</label>
20 
21<label class="flex mt-4 items-center space-x-2">
22    <ui:toggle :checked="true" color="warning" />
23    <span>Yes, or no?</span>
24</label>
25 
26<label class="flex mt-4 items-center space-x-2">
27    <ui:toggle :checked="true" color="danger" />
28    <span>Yes, or no?</span>
29</label>

Since they're not real inputs, we bind their value to a hidden checkbox. This allows Livewire and Alpine to support arrays of toggles as if they were normal checkboxes... because... well, the hidden one is a normal checkbox.

Properties

Property Type Default Description
checked boolean false Determines the on or off state of the toggle.
color string | Color primary The color during the "on" state of the toggle.
withIcon boolean true Include icons within the toggle's circle / dot.

Checked

Use the checked property to set the initial state of the toggle.

1<ui:toggle :checked="true" />
1<ui:toggle :checked="true" />
Copied!

Color

Use the color property to set the color of the toggle when it's on. It can be any of the following: primary, secondary, success, warning, danger.

Copied!
 
 1<label class="flex mt-4 items-center space-x-2">
 2    <ui:toggle :checked="true" color="primary" />
 3    <span>Primary</span>
 4</label>
 5 
 6<label class="flex mt-4 items-center space-x-2">
 7    <ui:toggle :checked="true" color="secondary" />
 8    <span>Secondary</span>
 9</label>
10 
11<label class="flex mt-4 items-center space-x-2">
12    <ui:toggle :checked="true" color="success" />
13    <span>Success</span>
14</label>
15 
16<label class="flex mt-4 items-center space-x-2">
17    <ui:toggle :checked="true" color="warning" />
18    <span>Warning</span>
19</label>
20 
21<label class="flex mt-4 items-center space-x-2">
22    <ui:toggle :checked="true" color="danger" />
23    <span>Danger</span>
24</label>
 1<label class="flex mt-4 items-center space-x-2">
 2    <ui:toggle :checked="true" color="primary" />
 3    <span>Primary</span>
 4</label>
 5 
 6<label class="flex mt-4 items-center space-x-2">
 7    <ui:toggle :checked="true" color="secondary" />
 8    <span>Secondary</span>
 9</label>
10 
11<label class="flex mt-4 items-center space-x-2">
12    <ui:toggle :checked="true" color="success" />
13    <span>Success</span>
14</label>
15 
16<label class="flex mt-4 items-center space-x-2">
17    <ui:toggle :checked="true" color="warning" />
18    <span>Warning</span>
19</label>
20 
21<label class="flex mt-4 items-center space-x-2">
22    <ui:toggle :checked="true" color="danger" />
23    <span>Danger</span>
24</label>

With Icon

Use the withIcon property to enable or disable an icon within the toggle's circle / dot. There's an "X" and a checkmark icon that will be used by default thanks to the wonderful Heroicons set.

Slots

Icon On

Use the icon-on slot to customize the icon to use when the toggle is on.

1<ui:toggle>
2    <x-slot:icon-on>
3        <svg>...</svg>
4    </x-slot:icon-on>
5</ui:toggle>
1<ui:toggle>
2    <x-slot:icon-on>
3        <svg>...</svg>
4    </x-slot:icon-on>
5</ui:toggle>
Copied!

Icon Off

Use the icon-off slot to customize the icon to use when the toggle is off.

1<ui:toggle>
2    <x-slot:icon-off>
3        <svg>...</svg>
4    </x-slot:icon-off>
5</ui:toggle>
1<ui:toggle>
2    <x-slot:icon-off>
3        <svg>...</svg>
4    </x-slot:icon-off>
5</ui:toggle>
Copied!
Like this project? Stop by the bear cave to stargaze.