Flexiwind | Switch

<div class="flex items-center flex-wrap gap-3">
    <x-ui.switch name="switch_1" id="switch_1" />
    <x-ui.switch name="switch_def2" id="switch_def2" track="muted" knob="muted" />
    <x-ui.switch name="switch_def3" id="switch_def3" track="title" knob="bg" />
</div>

Installation

Shell

php artisan flexi:add switch

With label

Use Dark Theme

Checked

Disabled

<div class="flex flex-col gap-3">
    <x-ui.switch id="switch" name="switch" label="Use Dark Theme" />
    <x-ui.switch checked id="switch_lab1" name="switch_lab1" label="Checked" />
    <x-ui.switch disabled id="switch_lab2" name="switch_lab2" label="Disabled" />
</div>

Sizes

Xs SM MD LG

<div class="flex flex-col gap-3 w-full">
    <label for="switch_xs" class="flex items-center gap-x-1">
        <x-ui.switch size="xs" name="switch_xs" id="switch_xs" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">Xs</span>
    </label>
    <label for="switch_sm" class="flex items-center gap-x-1">
        <x-ui.switch size="sm" name="switch_sm" id="switch_sm" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">SM</span>
    </label>
    <label for="switch_normal" class="flex items-center gap-x-1">
        <x-ui.switch name="switch_normal" id="switch_normal" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">MD</span>
    </label>
    <label for="switch_lg" class="flex items-center gap-x-1">
        <x-ui.switch size="lg" name="switch_lg" id="switch_lg" />
        <span class="text-sub-title peer-disabled:pointer-events-none peer-disabled:opacity-50 ms-3">LG</span>
    </label>
</div>

Outlined

<div class="flex items-center flex-wrap gap-6">
    <x-ui.switch outlined name="switch_outline1" id="switch_outline1" bg="bg" track="transparent" knob="gray-500" />
    <x-ui.switch outlined name="switch_outline2" id="switch_outline2" bg="bg" track="transparent" knob="gray-500" checked />
</div>

References

Switch Props

To configure the switch component you can use the following props. All props are optional.

Prop	Description
`size` (string)	The size of the switch. Options: "xs", "sm", "md", "lg". Default: "md"
`outlined` (boolean)	When true, renders the switch with an outline style instead of filled. Default: false
`class` (string)	Additional CSS classes for the switch. Default: ''

Styling

The switch component can be customized using CSS classes and CSS custom properties. The component renders as an input type= element.

CSS Custom Properties

Prop	Description
`--knob-bg`	Controls the background color of the switch knob (the circular part that moves).

Styling Examples

switch-basic-styling.blade.php

<!-- Basic switch with custom colors -->
<x-ui.switch name="switch_basic" id="switch_basic" 
    class="bg-bg-muted text-primary-600 [--knob-bg:var(--color-white)]" />

switch-outlined-styling.blade.php

<!-- Outlined switch -->
<x-ui.switch outlined name="switch_outline" id="switch_outline" 
    class="bg-bg text-transparent [--knob-bg:var(--color-gray-500)]" />

switch-custom-styling.blade.php

<!-- Custom colors and sizes -->
<x-ui.switch size="xs" name="switch_custom" id="switch_custom" 
    class="bg-accent text-accent [--knob-bg:var(--color-white)]" />

<x-ui.switch size="lg" name="switch_custom2" id="switch_custom2" 
    class="bg-success text-success [--knob-bg:var(--color-gray-900)]" />

Size Classes

The switch component automatically applies size classes based on the size prop, plus a base size class for vertical alignment:

Prop	Description
`xs`	Applies `switch-xs` + `switch-base-xs`
`sm`	Applies `switch-sm` + `switch-base-sm`
`md`	Applies `switch-md` + `switch-base-md` (default)
`lg`	Applies `switch-lg` + `switch-base-lg`

When outlined is true , the component adds ring ring-border-strong shadow — it does not use a separate switch-outline-* class prefix.

Switch

Demo