PasswordInput
Password is a specialized TextBox that enables users to input and edit passwords.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.
label
This property sets the label of the component. If not set, the component will not display a label.
labelBreak (default: true)
This boolean value indicates whether the
TextBox label can be split into multiple lines if it would overflow the available label width.labelPosition (default: "top")
Places the label at the given position of the component.
Available values:
| Value | Description |
|---|---|
start | The left side of the input (left-to-right) or the right side of the input (right-to-left) |
end | The right side of the input (left-to-right) or the left side of the input (right-to-left) |
top | The top of the input (default) |
bottom | The bottom of the input |
labelWidth
This property sets the width of the
TextBox component's label. If not defined, the label's width will be determined by its content and the available space.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.
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 |
Events
didChange
This event is triggered when value of TextBox has changed.
gotFocus
This event is triggered when the TextBox has received the focus.
lostFocus
This event is triggered when the TextBox has lost the focus.
Exposed Methods
focus
This method sets the focus on the
TextBox component.Signature:
focus(): voidsetValue
This API sets the value of the
TextBox. You can use it to programmatically change the value.Signature:
setValue(value: string): voidvalue: 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 | undefinedParts
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:
inputStyling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-Input--disabled | $backgroundColor--disabled | $backgroundColor--disabled |
| backgroundColor-TextBox--disabled | none | none |
| backgroundColor-TextBox-default | none | none |
| backgroundColor-TextBox-default--focus | none | none |
| backgroundColor-TextBox-default--hover | 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--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--disabled | none | none |
| borderColor-TextBox-default | none | none |
| borderColor-TextBox-default--focus | none | none |
| borderColor-TextBox-default--hover | 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--disabled | none | none |
| textColor-TextBox-default | none | none |
| textColor-TextBox-default--focus | none | none |
| textColor-TextBox-default--hover | 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 |