ion-toggle
Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the checked property.
<!-- Default Toggle -->
<ion-toggle></ion-toggle>
<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>
<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>
<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>
<!-- Toggles in a List -->
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle slot="end" value="pepperoni" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle slot="end" value="sausage" disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle slot="end" value="mushrooms"></ion-toggle>
</ion-item>
</ion-list>
Properties
checked
boolean
If true, the toggle is selected. Defaults to false.
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information, see Theming your App.
disabled
boolean
Indicates that the user cannot interact with the control.
mode
string
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
name
string
The name of the control, which is submitted with the form data.
value
string
the value of the toggle.
Attributes
checked
boolean
If true, the toggle is selected. Defaults to false.
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information, see Theming your App.
disabled
boolean
Indicates that the user cannot interact with the control.
mode
string
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
name
string
The name of the control, which is submitted with the form data.
value
string
the value of the toggle.
Events
ionBlur
Emitted when the toggle loses focus.
ionChange
Emitted when the value property has changed.
ionFocus
Emitted when the toggle has focus.
ionStyle
Emitted when the styles change.
Built with StencilJS