How can I help you?
Style and appearance in React Switch component
2 Mar 20262 minutes to read
Customize Switch styling by overriding its default CSS classes. The following table lists the CSS classes available for styling different Switch elements. Additionally, use the Theme Studio to create and preview custom themes for all Syncfusion components.
| CSS Class | Purpose |
|---|---|
| .e-switch-wrapper | Main Switch component container |
| .e-switch | Core Switch element |
| .e-switch-inner | Switch track (bar) in off mode |
| .e-switch-inner.e-switch-active | Switch track (bar) in on mode |
| .e-switch-on | On state label and styling |
| .e-switch-handle | Switch thumb (handle) in off mode |
| .e-switch-handle.e-switch-active | Switch thumb (handle) in on mode |
| .e-switch-wrapper:hover .e-switch-inner | Track hover state styling |
| .e-switch-wrapper:hover .e-switch-handle | Handle hover state styling |
| .e-switch-wrapper.e-switch-disabled | Disabled state styling |
| .e-switch-wrapper.e-disabled | Alternative disabled state class |
| .e-switch-label | Label text styling |
| .e-switch-wrapper.e-small | Small size variant |
| .e-switch-wrapper.e-large | Large size variant |