Skip to main content
Version: v6

ion-toggle

shadow

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

interface ToggleChangeEventDetail<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.

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

Properties

checked

Descriptiontrueの場合、トグルが選択されます。
Attributechecked
Typeboolean
Defaultfalse

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザーはトグルを操作することができません。
Attributedisabled
Typeboolean
Defaultfalse

enableOnOffLabels

Descriptionトグル内のオン/オフアクセシビリティスイッチラベルを有効にします。
Attributeenable-on-off-labels
Typeboolean | undefined
Defaultconfig.get('toggleOnOffLabels')

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

value

DescriptionThe value of the toggle does not mean if it's checked or not, use the checked property for that.

The value of a toggle is analogous to the value of a <input type="checkbox">, it's only used when the toggle participates in a native <form>.
Attributevalue
Typenull | string | undefined
Default'on'

Events

NameDescription
ionBlurトグルのフォーカスが外れたときに発行されます。
ionChangevalueプロパティが変更されたときに発行されます。
ionFocusトグルにフォーカスが当たったときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
handleチェックした状態を変更するために使用するトグルハンドル(つまみ)です。
trackトグルの背景トラックです。

CSS Custom Properties

NameDescription
--backgroundトグルの背景
--background-checkedチェックしたときのトグルの背景
--border-radiusトグルトラックのボーダー半径
--handle-backgroundトグルハンドルの背景
--handle-background-checkedチェックしたときのトグルハンドルの背景
--handle-border-radiusトグルハンドルのボーダー半径
--handle-box-shadowトグルハンドルのボックスシャドウ
--handle-heightトグルハンドルの高さ
--handle-max-heightトグルハンドルの最大の高さ
--handle-spacingトグルハンドル周辺の横方向の間隔
--handle-transitionトグルハンドルの変遷
--handle-widthトグルハンドルの幅

Slots

No slots available for this component.