Form Components

Toggle

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

<x-toggle />
<x-toggle label="Label" />
<x-toggle label="Label *" />

# Text left

New
<x-toggle label="Label" text-left />

# Size variants

New
<x-toggle checked sm />
<x-toggle checked md /> {{-- default --}}
<x-toggle checked lg />

# Color variants

New
<x-toggle checked />
<x-toggle checked secondary />
<x-toggle checked slate />
<x-toggle checked zinc />
<x-toggle checked gray />
<x-toggle checked neutral />
<x-toggle checked stone />
<x-toggle checked red />
<x-toggle checked orange />
<x-toggle checked amber />
<x-toggle checked yellow />
<x-toggle checked lime />
<x-toggle checked green />
<x-toggle checked emerald />
<x-toggle checked teal />
<x-toggle checked cyan />
<x-toggle checked sky />
<x-toggle checked blue />
<x-toggle checked Indigo />
<x-toggle checked violet />
<x-toggle checked purple />
<x-toggle checked fuchsia />
<x-toggle checked pink />
<x-toggle checked rose />
<x-toggle checked black />
<x-toggle checked white />

# Customize toggle

New
You can easily customize any toggle using standard css classes.
<x-toggle class="peer-focus:ring-4 ring-offset-0" checked />
<x-toggle class="w-16 h-8 after:h-7 after:w-7 after:start-[4px] peer-focus:ring-0 ring-offset-0 peer-focus:ring-blue-600 dark:peer-focus:ring-blue-600 peer-checked:bg-blue-600" checked />
Code highlighting powered by Torchlight