Guidelines Components Blocks

Alert Alert dialog Avatar Badges Breadcrumbs Buttons Cards Cart Chat bubbles Checkbox Chips Combobox Date picker Dialog Field group File upload Icon box Inline prompt Input Input group Input OTP Item - Cards Item - Detail Item - Rows Offers Pagination Radio Reviews Select Sheets Stepper progress Switch Tabs Textarea Toast Tooltip Tracker

Switch

Toggle switch components with sizes, shapes, and optional indicators.

Sizes

size="sm"

size="md"

size="lg"

size="xl"

Available in sm, md (default), lg, and xl sizes.

Shapes

shape="pill"

shape="square"

Pill (default) and square shape variants.

With label

Enable notifications

Marketing emails

Paired with Label component for form usage.

With indicators

Icons on/off

permanent=true

SwitchIndicator shows icons for on/off states. Use permanent prop to keep both visible.

Disabled

Disabled

Disabled checked

Disabled state with reduced opacity.