PasswordInput
Secure password input with visibility toggle
Import: import { PasswordInput } from 'react-native-mantine';
Usage
import { PasswordInput } from 'react-native-mantine';
<PasswordInput
label="Password"
placeholder="Enter password"
required
onChangeText={setPassword}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
visible | boolean | Controlled visibility state. When true, password text is visible; when false, text is obscured | |
onVisibilityChange | (visible: boolean) => void | Callback fired when the visibility toggle button is pressed, receives the new visibility state | |
visibilityToggleLabel | string | "Toggle password visibility" | Accessibility label for the visibility toggle button |
visibilityToggleIcon | (visible: boolean) => React.ReactNode | Custom icon component for the visibility toggle. Receives current visibility state as parameter | |
label | React.ReactNode | Input label displayed above the password field | |
description | React.ReactNode | Description text displayed below the label and above the input | |
error | React.ReactNode | Error message displayed below the input. When set, input border becomes red | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' | Input size that controls height, font size, and padding |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | 'sm' | Key of theme.radius or any valid number to set border-radius |
icon | React.ReactNode | Icon displayed on the left side of the input field | |
required | boolean | false | Displays a red asterisk (*) after the label to indicate field is required |
variant | 'default' | 'filled' | 'unstyled' | 'default' | Controls input appearance: default (outlined), filled (background), or unstyled (no borders) |
placeholder | string | Placeholder text displayed when input is empty | |
value | string | Input value for controlled component | |
onChangeText | (text: string) => void | Callback fired when input value changes | |
onBlur | () => void | Callback fired when input loses focus | |
editable | boolean | true | If false, input is read-only and cannot be edited |
autoCapitalize | 'none' | 'sentences' | 'words' | 'characters' | 'none' | Controls automatic capitalization behavior |
style | ViewStyle | Additional styles applied to the input element itself | |
wrapperStyle | ViewStyle | Additional styles applied to the wrapper container |