Ti Password

The TiPassword component is a versatile password input field with optional validation and visibility toggling, built using React. It offers a secure way to input passwords while providing feedback on the password's validity.

Usage

Follow these steps to integrate the TiPassword component into your React application:

Import the Component: In the file where you want to use the TiPassword component, import it at the top of the file:

import React from 'react';
import { TiPassword } from '@k8pai/tailwind-inputs';

Render the Component: You can now use the TiPassword component in your JSX by passing the necessary props:

<TiPassword
	name="password"
	label="Password"
	showPass={true}
	mandatory
	style={{
		label: 'text-white font-semibold tracking-wide ml-3',
	}}
	error="Password must contain at least 8 characters"
	className={'space-y-2'}
/>

Props

The TiPassword component accepts the following props:

name (required): A unique identifier for the component.
error: The error message to display when the password is invalid.
label: The label to display above the input.
style: An object to customize the component's appearance (e.g., mode, size, etc.).
loader: A boolean to show a loading spinner during validation.
showPass: A boolean to enable the visibility toggle for the password.
validate: A validation criteria for the password (string or undefined).
mandatory: A boolean indicating if the input is mandatory.
placeholder: The placeholder text for the input.
autoComplete: The autocomplete attribute for the input.
...rest: Any additional props you want to pass to the component.

Example

Here's a comprehensive example demonstrating how to use the TiPassword component with various props:

<TiPassword
	name="newPassword"
	label="New Password"
	showPass={true}
	validate="password"
	error="Password must contain at least 8 characters"
	style={{ mode: 'dark' }}
/>

Ti number Ti radio