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 />