ion-toggle

Toggles are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the checked property.

Basic Usage​

On / Off Labels​

Toggles can enable on/off labels by setting the enableOnOffLabels property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle.

Theming​

Colors​

CSS Custom Properties​

CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the width and height of the toggle directly to change the size of the track, while using the --handle-width and --handle-height custom properties to customize the handle size.

CSS Shadow Parts​

We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties.

Interfaces​

ToggleChangeEventDetail​

interfaceToggleChangeEventDetail<T=any>{
 value:T;
 checked:boolean;
}

ToggleCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interfaceToggleCustomEvent<T=any>extendsCustomEvent{
 detail: ToggleChangeEventDetail<T>;
 target: HTMLIonToggleElement;
}

Properties​

checked​

color​

disabled​

enableOnOffLabels​

mode​

name​

value​

Events​

Methods​

No public methods available for this component.

CSS Shadow Parts​

CSS Custom Properties​

Slots​

No slots available for this component.