Skip to main content
Version: v8 (beta)

ion-password-toggle

shadow

The InputPasswordToggle component is a companion component to Input. It allows users to toggle the visibility of text in a password input.

Basic Usage

info

InputPasswordToggle must be used with an Input that has its type property set to either 'text' or 'password'.

Using any other type will cause a warning to be logged.

Properties

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 | undefined
Defaultundefined

hideIcon

DescriptionThe icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
Attributehide-icon
Typestring | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

showIcon

DescriptionThe icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
Attributeshow-icon
Typestring | undefined
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.