Overview
InputPassword is a Jetpack Compose text input field designed for secure password entry with built-in visibility toggle functionality. It includes the following features:
- Password masking with visibility toggle
- Lock icon as leading indicator
- Automatic internal visibility state management
- Primary and secondary label support
- Helper text and error state visualization
- Read-only and disabled states
- Accessibility support for password visibility
Visual reference
API reference
InputPassword
A composable function that displays a password input field with visibility toggle.
@Composable
fun InputPassword(
value: TextFieldValue,
onValueChange: (date: TextFieldValue) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
isError: Boolean = false,
readOnly: Boolean = false,
primaryLabelText: String? = null,
secondaryLabelText: String? = null,
placeholderText: String? = null,
helperText: String? = null,
keyboardActions: KeyboardActions = KeyboardActions(),
)
Parameters
|
Property |
Type |
Description |
|---|---|---|
|
value |
TextFieldValue |
Current text field value |
|
onValueChange |
(TextFieldValue) -> Unit |
Callback invoked with updated value |
|
modifier |
Modifier |
Modifier for styling or layout |
|
enabled |
Boolean |
Whether input is editable. Defaults to true |
|
isError |
Boolean |
Whether to show error state visuals. Defaults to false |
|
readOnly |
Boolean |
Disables editing but retains visual style. Defaults to false |
|
primaryLabelText |
String? |
Main label above the field |
|
secondaryLabelText |
String? |
Optional secondary label |
|
placeholderText |
String? |
Text shown when field is empty |
|
helperText |
String? |
Supporting or error text below the field |
|
keyboardActions |
KeyboardActions |
Actions triggered by IME keyboard |
Usage
Basic usage
Create a basic password input with state management.
import com.backbase.android.design.component.InputPassword
import androidx.compose.ui.text.input.TextFieldValue
@Composablefun PasswordInputExample() {
var password by remember { mutableStateOf(TextFieldValue()) }
InputPassword(
value = password,
onValueChange = { password = it },
primaryLabelText = "Password",
placeholderText = "Enter your password",
)
}
Common use cases
With labels and helper text
InputPassword(
value = password,
onValueChange = { password = it },
primaryLabelText = "Password",
secondaryLabelText = "(required)",
helperText = "Must be at least 8 characters",
placeholderText = "Enter password",
)
Error state
Display validation errors.
InputPassword(
value = password,
onValueChange = { password = it },
isError = true,
helperText = "Password is too weak",
)
Disabled state
Disable user interaction.
InputPassword(
value = password,
onValueChange = { },
enabled = false,
primaryLabelText = "Password",
)
Read-only state
Display password without allowing edits.
InputPassword(
value = password,
onValueChange = { },
readOnly = true,
primaryLabelText = "Saved Password",
)
States and variants
Hidden state
Default password display with masking.
Visual characteristics:
- Password characters displayed as dots
- Visibility off icon in trailing position
- Lock icon as leading indicator
Visible state
Password text is visible.
Visual characteristics:
- Password text displayed in plain text
- Visibility on icon in trailing position
- Lock icon as leading indicator
Focused state
Field has input focus.
Visual characteristics:
- Highlighted border color
- Cursor visible
- Visibility toggle active
Error state
Displays when validation fails.
Visual characteristics:
- Error border color
- Error icon displayed instead of visibility toggle
- Helper text in error color
Disabled state
Non-interactive state.
Visual characteristics:
- Grayed out appearance
- Lock icon dimmed
- Field not editable
- Visibility toggle visible but functional
Read-only state
Displays value without allowing edits.
Visual characteristics:
- Standard text appearance
- No editing capability
- Visibility toggle visible but interaction limited
Customization
Styling
The component uses InputPasswordColorScheme for colors and InputPasswordLayout for layout properties.
Design tokens
The InputPassword component uses the following design tokens:
- Border colors for each state: enabled, focused, error, disabled, read-only
- Background colors for each state
- Text colors for password value, labels, placeholders, and helper text
- Leading icon color for lock icon
- Trailing icon color for visibility toggle and error icon
- Typography styles for text, labels, and helper text
- Cursor color
Accessibility
- Visibility toggle button announces current state
- Show/hide password actions have accessibility descriptions:
- "Show password" when hidden
- "Hide password" when visible
- Error states announced via accessibility semantics
- Lock icon provides visual security context
- Labels provide context for screen readers
Dependencies
- External dependencies: None
- Internal dependencies:
- LocalInputPasswordColorScheme: Color scheme composition local
- LocalInputPasswordLayout: Layout composition local
- Icons.Painter.iconLock: Leading lock icon
- Icons.Painter.iconVisibility: Visibility on icon
- Icons.Painter.iconVisibilityOff: Visibility off icon