Component

PasswordInput

Password field with visibility toggle, label, required, and error support.

React Native

Password input

Password field with visibility toggle.

Password *

Short password

import { useState } from 'react';
import { PasswordInput } from '@sohantalukder/rn-kit';

export function PasswordField() {
  const [password, setPassword] = useState('');
  const error =
    password.length > 0 && password.length < 8
      ? 'Use at least 8 characters.'
      : undefined;

  return (
    <PasswordInput
      label="Password"
      placeholder="Enter password"
      required
      value={password}
      errorMessage={error}
      onChangeText={(value) => setPassword(value)}
    />
  );
}

Live component

defaultcontrollederrorcustom style

Pair with validation copy.
Avoid pre-filling sensitive values in examples.

Usage

import { PasswordInput } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { PasswordInput } from '@sohantalukder/rn-kit';

export function PasswordField() {
  const [password, setPassword] = useState('');
  const error =
    password.length > 0 && password.length < 8
      ? 'Use at least 8 characters.'
      : undefined;

  return (
    <PasswordInput
      label="Password"
      placeholder="Enter password"
      required
      value={password}
      errorMessage={error}
      onChangeText={(value) => setPassword(value)}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

labelstring-Human-readable text associated with the form control.

animatedLabelbooleancomponent defaultFloats the label inside the field when focused or filled.

placeholderstring-Hint text shown before a value is entered or selected.

valuestring | number | boolean-Controlled value rendered by the input or control.

errorMessagestring-Validation message rendered below the input.

requiredbooleanfalseMarks the field as required in its label presentation.

Theme

PasswordInput reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
controlled
error
custom style

Best Practices

Pair with validation copy.
Avoid pre-filling sensitive values in examples.