import Props from '@ionic-internal/component-api/v6/toggle/props.md'; import Events from '@ionic-internal/component-api/v6/toggle/events.md'; import Methods from '@ionic-internal/component-api/v6/toggle/methods.md'; import Parts from '@ionic-internal/component-api/v6/toggle/parts.md'; import CustomProps from '@ionic-internal/component-api/v6/toggle/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v6/toggle/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

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.

import Basic from '@site/static/usage/v6/toggle/basic/index.md';

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.

import OnOff from '@site/static/usage/v6/toggle/on-off/index.md';

import Colors from '@site/static/usage/v6/toggle/theming/colors/index.md';

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.

import CSSProps from '@site/static/usage/v6/toggle/theming/css-properties/index.md';

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.

import CSSParts from '@site/static/usage/v6/toggle/theming/css-shadow-parts/index.md';

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

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

interface ToggleCustomEvent<T = any> extends CustomEvent {
  detail: ToggleChangeEventDetail<T>;
  target: HTMLIonToggleElement;
}