Switch.
A setting that changes immediately.
An immediate on/off setting with three sizes, semantic colors, custom thumb icons and static materials. Keep its label stable as the thumb changes position.
Make it yours
Preparing the example…
Composition
AnatomyRoot owns the immediate on/off setting and native form state. Thumb owns optional decorative icons. Keep the visible label stable; Field.Label and Field.Description establish accessible relationships.
Field.Root
├── Field.Label → Switch.Root → Switch.Thumb
└── Field.DescriptionA place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesLoading switch comparisons…
The finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native and Base UI Switch props are forwarded; this table covers the options Dixy adds.
SwitchRoot
| Prop | Type / description | Default |
|---|---|---|
size | "sm" | "md" | "lg"Track and thumb proportions, using Dixy's control sizes. | md |
variant | "soft" | "solid" | "outline"Visual emphasis of the selected track. | solid |
color | "neutral" | "accent" | "danger" | "success"Semantic selected color. Accent follows Theme.accentColor. | accent |
radius | "none" | "sm" | "md" | "lg" | "full"Track rounding; thumb rounding is inset to match. | Theme.radius |
material | "matte" | "glossy" | "soft" | "metal" | "paper"Static track finish; import materials.css. | Theme.material |
SwitchThumb
| Prop | Type / description | Default |
|---|---|---|
checkedIcon | ReactNodeDecorative on-state artwork. Custom children take precedence. | — |
uncheckedIcon | ReactNodeDecorative off-state artwork. Custom children take precedence. | — |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-switch-track-width | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityUse a stable visible label or aria-label, and connect supporting text with aria-describedby. Icons are decorative; the labeled root exposes the checked state. Disabled controls skip keyboard focus; readOnly preserves focus and the current setting. Thumb position communicates state independently of color and materials.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
Choose sm/md/lg proportions, solid/soft/outline emphasis, and accent/neutral/danger/success color. Accent follows any Theme accent palette. Radius and material inherit Theme unless overridden on Root. Thumb accepts checkedIcon/uncheckedIcon from your SVG or icon library; custom children take precedence. Import materials.css for all five static finishes. Track color, thumb travel and icon crossfade use the shared 120ms feedback recipe; reduced motion changes immediately while preserving the selected thumb position. Base UI owns refs, controlled/uncontrolled state, forms, readOnly, disabled and render composition.
--dixy-switch-track-width