Switcher
On/off toggle — a 40×24 or 32×20 track that turns etisalat red when on, with an inverse scheme for dark surfaces.
switcherOpen in Figma ↗Use for: Standalone settings and preferences that take effect immediately on tap — such as enabling notifications, toggling a feature, or activating a subscription option. Each switcher controls exactly one independent setting.
Not for: Mutually exclusive choices within a group — use a radio pattern or chips instead. Not for confirming an action — use a button instead.
Choosing: Use small=false (40×24px) for standard settings screens and main content. Use small=true (32×20px) for dense layouts, list items, and compact toolbars. Set inverse=false on light or neutral backgrounds. Set inverse=true on brand red or dark midnight surfaces — the track and knob tokens invert to remain legible. Set active=true when the setting is on — the track fills brand red and the knob moves to the right edge. Set disabled=true to prevent interaction — both track and knob render at reduced opacity.
Rules: Always pair with a visible label that describes what the switcher controls. Do not use more than one switcher to control the same setting. The knob is always white on default surfaces; do not override the knob token.
import SwiftUI import EandTokens // V1.2 switcher: md 40×24 / sm 32×20, knob 20 / 16 with a 2pt inset. Every state is a // color/mark pair — off track #c0bfc8, on brand red, knob white; disabled is a colour. struct SwitcherView: View { @Binding var on: Bool var small = false var body: some View { let w = small ? EandSwitcher.trackWidthSm : EandSwitcher.trackWidthMd let h = small ? EandSwitcher.trackHeightSm : EandSwitcher.trackHeightMd let knob = small ? EandSwitcher.thumbWidthSm : EandSwitcher.thumbWidthMd Capsule() .fill(on ? EandColor.markDefaultSurfaceSelected : EandColor.markDefaultSurfaceDefault) .frame(width: w, height: h) .overlay(alignment: on ? .trailing : .leading) { Circle().fill(on ? EandColor.markDefaultIconSelected : EandColor.markDefaultIconDefault) .frame(width: knob, height: knob) .padding(EandSpacing.spacing2xs) } .animation(.easeOut(duration: 0.15), value: on) .onTapGesture { on.toggle() } .accessibilityAddTraits(.isButton) } }
When to use
- Use for a setting that takes effect immediately, with no confirm step.
- Use
inverseon brand-red and midnight surfaces: the track is white and the knob turns red when on. - Don't use inside a form that is confirmed with a submit button — use a Checkbox.
size is md (40×24, the default) or sm (32×20). lg is the deprecated pre-V1.2 name
for md. Figma's default is the small switch; the code keeps md so shipped screens do not
shrink.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked? | boolean | — | |
defaultChecked? | boolean | false | |
disabled? | boolean | — | |
inverse? | boolean | — | Inverse scheme for brand/midnight surfaces: white track, red knob when on. |
onChange? | ((checked: boolean) => void) | — | |
size? | 'lg' | 'md' | 'sm' | md | md 40×24 (Figma small=false) or sm 32×20 (small=true). lg is the deprecated
pre-V1.2 name for md. |
Design
Figma source: switcher — etisalat Consumer App DSL V1.2
- Track 40×24 or 32×20 (
switcher/track/*), knob 20 or 16 (switcher/thumb/*), inset 2px (spacing/2xs), pill. - Every state is a
mark/{default,inverse}/{surface,icon}/*pair. Disabled is a colour, not opacity. - The inverse off state follows the
smsymbol; themdandsmsymbols disagree there, and the question is open with design.