PasswordInput
Password is a specialized TextBox that enables users to input and edit passwords.
Behaviors
This component supports the following behaviors:
| Behavior | Properties |
|---|---|
| Animation | animation, animationOptions |
| Bookmark | bookmark, bookmarkLevel, bookmarkTitle, bookmarkOmitFromToc |
| Form Binding | bindTo, initialValue, noSubmit |
| Component Label | label, labelPosition, labelWidth, labelBreak, required, enabled, shrinkToLabel, style, readOnly |
| Publish/Subscribe | subscribeToTopic |
| Tooltip | tooltip, tooltipMarkdown, tooltipOptions |
| Validation | bindTo, required, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, validationMode, verboseValidationFeedback |
| Styling Variant | variant |
Properties
autoFocus
default: false
If this property is set to true, the component gets the focus automatically when displayed.
enabled
default: true
This boolean property value indicates whether the component responds to user events (true) or not (false).
endIcon
This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.
endText
This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.
gap
This property defines the gap between the adornments and the input area. If not set, the gap declared by the current theme is used.
initialValue
default: ""
This property sets the component's initial value.
invalidMessages
The invalid messages to display for the input component.
maxLength
This property sets the maximum length of the input it accepts.
passwordHiddenIcon
default: "eye-off"
The icon to display when the password is hidden (when showPasswordToggle is true).
passwordVisibleIcon
default: "eye"
The icon to display when the password is visible (when showPasswordToggle is true).
placeholder
An optional placeholder text that is visible in the input field when its empty.
readOnly
default: false
Set this property to true to disallow changing the component value.
required
default: false
Set this property to true to indicate it must have a value before submitting the containing form.
showPasswordToggle
default: false
If true, a toggle button is displayed to switch between showing and hiding the password input.
startIcon
This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.
startText
This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.
validationIconError
Icon to display for error state when concise validation summary is enabled.
validationIconSuccess
Icon to display for valid state when concise validation summary is enabled.
validationStatus
default: "none"
This property allows you to set the validation status of the input component.
Available values:
| Value | Description |
|---|---|
valid | Visual indicator for an input that is accepted |
warning | Visual indicator for an input that produced a warning |
error | Visual indicator for an input that produced an error |
verboseValidationFeedback
Enables a concise validation summary (icon) in input components.
Events
didChange
This event is triggered when value of TextBox has changed.
Signature: didChange(newValue: any): void
newValue: The new value of the component.
gotFocus
This event is triggered when the TextBox has received the focus.
Signature: gotFocus(): void
lostFocus
This event is triggered when the TextBox has lost the focus.
Signature: lostFocus(): void
Exposed Methods
focus
This method sets the focus on the TextBox component.
Signature: focus(): void
setValue
This API sets the value of the TextBox. You can use it to programmatically change the value.
Signature: setValue(value: string): void
value: The new value to set. If the value is empty, it will clear the input.
value
You can query the component's value. If no value is set, it will retrieve undefined.
Signature: get value(): string | undefined
Parts
The component has some parts that can be styled through layout properties and theme variables separately:
endAdornment: The adornment displayed at the end of the text box.input: The text box input area.label: The label displayed for the text box.startAdornment: The adornment displayed at the start of the text box.
Default part: input
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-Input | transparent | transparent |
| backgroundColor-Input--disabled | $backgroundColor--disabled | $backgroundColor--disabled |
| backgroundColor-TextBox--default | none | none |
| backgroundColor-TextBox--default--focus | none | none |
| backgroundColor-TextBox--default--hover | none | none |
| backgroundColor-TextBox--disabled | none | none |
| backgroundColor-TextBox--error | none | none |
| backgroundColor-TextBox--error--focus | none | none |
| backgroundColor-TextBox--error--hover | none | none |
| backgroundColor-TextBox--success | none | none |
| backgroundColor-TextBox--success--focus | none | none |
| backgroundColor-TextBox--success--hover | none | none |
| backgroundColor-TextBox--warning | none | none |
| backgroundColor-TextBox--warning--focus | none | none |
| backgroundColor-TextBox--warning--hover | none | none |
| borderColor-Input--default | $borderColor-Input-default | $borderColor-Input-default |
| borderColor-Input--default--hover | $borderColor-Input-default--hover | $borderColor-Input-default--hover |
| borderColor-Input--disabled | $borderColor--disabled | $borderColor--disabled |
| borderColor-Input--error | $borderColor-Input-default--error | $borderColor-Input-default--error |
| borderColor-Input--success | $borderColor-Input-default--success | $borderColor-Input-default--success |
| borderColor-Input--warning | $borderColor-Input-default--warning | $borderColor-Input-default--warning |
| borderColor-TextBox--default | none | none |
| borderColor-TextBox--default--focus | none | none |
| borderColor-TextBox--default--hover | none | none |
| borderColor-TextBox--disabled | none | none |
| borderColor-TextBox--error | none | none |
| borderColor-TextBox--error--focus | none | none |
| borderColor-TextBox--error--hover | none | none |
| borderColor-TextBox--success | none | none |
| borderColor-TextBox--success--focus | none | none |
| borderColor-TextBox--success--hover | none | none |
| borderColor-TextBox--warning | none | none |
| borderColor-TextBox--warning--focus | none | none |
| borderColor-TextBox--warning--hover | none | none |
| borderRadius-Input | $borderRadius | $borderRadius |
| borderRadius-TextBox--default | none | none |
| borderRadius-TextBox--error | none | none |
| borderRadius-TextBox--success | none | none |
| borderRadius-TextBox--warning | none | none |
| borderStyle-Input | solid | solid |
| borderStyle-TextBox--default | none | none |
| borderStyle-TextBox--error | none | none |
| borderStyle-TextBox--success | none | none |
| borderStyle-TextBox--warning | none | none |
| borderWidth-Input | 1px | 1px |
| borderWidth-TextBox--default | none | none |
| borderWidth-TextBox--error | none | none |
| borderWidth-TextBox--success | none | none |
| borderWidth-TextBox--warning | none | none |
| boxShadow-TextBox--default | none | none |
| boxShadow-TextBox--default--focus | none | none |
| boxShadow-TextBox--default--hover | none | none |
| boxShadow-TextBox--error | none | none |
| boxShadow-TextBox--error--focus | none | none |
| boxShadow-TextBox--error--hover | none | none |
| boxShadow-TextBox--success | none | none |
| boxShadow-TextBox--success--focus | none | none |
| boxShadow-TextBox--success--hover | none | none |
| boxShadow-TextBox--warning | none | none |
| boxShadow-TextBox--warning--focus | none | none |
| boxShadow-TextBox--warning--hover | none | none |
| color-adornment-Input | $textColor-subtitle | $textColor-subtitle |
| color-adornment-TextBox--default | none | none |
| color-adornment-TextBox--error | none | none |
| color-adornment-TextBox--success | none | none |
| color-adornment-TextBox--warning | none | none |
| color-passwordToggle-Input | $textColor-subtitle | $textColor-subtitle |
| color-passwordToggle-TextBox | none | none |
| color-passwordToggle-TextBox--focus | none | none |
| color-passwordToggle-TextBox--hover | none | none |
| fontSize-placeholder-TextBox--default | none | none |
| fontSize-placeholder-TextBox--error | none | none |
| fontSize-placeholder-TextBox--success | none | none |
| fontSize-placeholder-TextBox--warning | none | none |
| fontSize-TextBox--default | none | none |
| fontSize-TextBox--error | none | none |
| fontSize-TextBox--success | none | none |
| fontSize-TextBox--warning | none | none |
| gap-adornment-Input | $space-2 | $space-2 |
| gap-adornment-TextBox | none | none |
| minHeight-Input | 39px | 39px |
| outlineColor-Input--focus | $outlineColor--focus | $outlineColor--focus |
| outlineColor-TextBox--default--focus | none | none |
| outlineColor-TextBox--error--focus | none | none |
| outlineColor-TextBox--success--focus | none | none |
| outlineColor-TextBox--warning--focus | none | none |
| outlineOffset-Input--focus | $outlineOffset--focus | $outlineOffset--focus |
| outlineOffset-TextBox--default--focus | none | none |
| outlineOffset-TextBox--error--focus | none | none |
| outlineOffset-TextBox--success--focus | none | none |
| outlineOffset-TextBox--warning--focus | none | none |
| outlineStyle-Input--focus | $outlineStyle--focus | $outlineStyle--focus |
| outlineStyle-TextBox--default--focus | none | none |
| outlineStyle-TextBox--error--focus | none | none |
| outlineStyle-TextBox--success--focus | none | none |
| outlineStyle-TextBox--warning--focus | none | none |
| outlineWidth-Input--focus | $outlineWidth--focus | $outlineWidth--focus |
| outlineWidth-TextBox--default--focus | none | none |
| outlineWidth-TextBox--error--focus | none | none |
| outlineWidth-TextBox--success--focus | none | none |
| outlineWidth-TextBox--warning--focus | none | none |
| padding-TextBox | none | none |
| paddingBottom-TextBox | none | none |
| paddingHorizontal-TextBox | $space-2 | $space-2 |
| paddingLeft-passwordToggle-TextBox | none | none |
| paddingLeft-TextBox | none | none |
| paddingRight-passwordToggle-TextBox | none | none |
| paddingRight-TextBox | none | none |
| paddingTop-TextBox | none | none |
| paddingVertical-TextBox | $space-2 | $space-2 |
| textColor-Input | $textColor-primary | $textColor-primary |
| textColor-Input--disabled | $textColor--disabled | $textColor--disabled |
| textColor-placeholder-Input | $textColor-subtitle | $textColor-subtitle |
| textColor-placeholder-TextBox--default | none | none |
| textColor-placeholder-TextBox--error | none | none |
| textColor-placeholder-TextBox--success | none | none |
| textColor-placeholder-TextBox--warning | none | none |
| textColor-TextBox--default | none | none |
| textColor-TextBox--default--focus | none | none |
| textColor-TextBox--default--hover | none | none |
| textColor-TextBox--disabled | none | none |
| textColor-TextBox--error | none | none |
| textColor-TextBox--error--focus | none | none |
| textColor-TextBox--error--hover | none | none |
| textColor-TextBox--success | none | none |
| textColor-TextBox--success--focus | none | none |
| textColor-TextBox--success--hover | none | none |
| textColor-TextBox--warning | none | none |
| textColor-TextBox--warning--focus | none | none |
| textColor-TextBox--warning--hover | none | none |