A toggle switch component for binary on/off settings, with label, description, color, and size variants.
A standalone toggle with no label. Click to flip between on and off states.
{{-- Off by default --}}
<x-ui::switch />
{{-- On by default --}}
<x-ui::switch :checked="true" />Eight colors for the active state: blue (default), green, purple, red, zinc, yellow, lime, and sky.
<x-ui::switch :checked="true" color="blue" />
<x-ui::switch :checked="true" color="green" />
<x-ui::switch :checked="true" color="purple" />
<x-ui::switch :checked="true" color="red" />
<x-ui::switch :checked="true" color="zinc" />
<x-ui::switch :checked="true" color="yellow" />
<x-ui::switch :checked="true" color="lime" />
<x-ui::switch :checked="true" color="sky" />Three sizes — sm, md (default), lg — scale the track and knob together.
<x-ui::switch size="sm" :checked="true" />
<x-ui::switch size="md" :checked="true" />
<x-ui::switch size="lg" :checked="true" />Add a label prop to render clickable text beside the track. Clicking the label also toggles the switch.
Email notifications
Dark mode
Auto-save drafts
Enable two-factor authentication
<x-ui::switch label="Email notifications" />
<x-ui::switch label="Dark mode" :checked="true" color="zinc" />
<x-ui::switch label="Auto-save drafts" :checked="true" color="green" />
<x-ui::switch size="lg" label="Enable two-factor authentication" color="purple" />Pair a label with a description for a richer settings row.
Marketing emails
Receive updates about new products and promotions.
Two-factor authentication
Add an extra layer of security to your account.
Public profile
Allow others to find and view your profile.
<x-ui::switch
label="Marketing emails"
description="Receive updates about new products and promotions."
/>
<x-ui::switch
:checked="true"
color="green"
label="Two-factor authentication"
description="Add an extra layer of security to your account."
/>
<x-ui::switch
:checked="true"
color="blue"
size="lg"
label="Public profile"
description="Allow others to find and view your profile."
/>Add disabled to prevent interaction. Both on and off states are supported.
Notifications
Upgrade your plan to enable this.
Required setting
This setting is managed by your organization.
{{-- Disabled off --}}
<x-ui::switch disabled label="Notifications" description="Upgrade your plan to enable this." />
{{-- Disabled on --}}
<x-ui::switch disabled :checked="true" color="green" label="Required setting"
description="This setting is managed by your organization." />Compose multiple switches inside a card for a typical notifications or preferences settings panel.
Choose what you want to be notified about.
Comments
Get notified when someone comments on your post.
Mentions
Get notified when someone mentions you.
New followers
Get notified when someone follows you.
Weekly digest
Receive a weekly summary of your activity.
<x-ui::card>
<div class="space-y-1">
<x-ui::heading level="6">Notifications</x-ui::heading>
<x-ui::text variant="muted">Choose what you want to be notified about.</x-ui::text>
</div>
<x-ui::separator class="my-5" />
<div class="space-y-5">
<x-ui::switch
name="notify_comments"
:checked="true"
color="blue"
label="Comments"
description="Get notified when someone comments on your post."
/>
<x-ui::switch
name="notify_mentions"
:checked="true"
color="blue"
label="Mentions"
description="Get notified when someone mentions you."
/>
<x-ui::switch
name="notify_follows"
color="blue"
label="New followers"
description="Get notified when someone follows you."
/>
<x-ui::switch
name="notify_digest"
color="blue"
label="Weekly digest"
description="Receive a weekly summary of your activity."
/>
</div>
</x-ui::card>