React Secret Input

React Secret Input is a lightweight React component for securely masking sensitive form data, allowing you to easily show or hide input values.

✨ Fully styled withTailwind CSSfor effortless customization.
💪 Seamlessly integrates withReact Hook Formfor validation and state management.

Installation

Step 1

▶

Install the package.

npm install @arisevan/react-secret-input

Step 2

▶

Add the following code to your main css file.

global.css

@import "tailwindcss";/* Note: You may need to change the path to fit your project structure */@source "../../node_modules/@arisevan/react-secret-input/dist/index.{js,ts,jsx,tsx}";

Usage

Full Name

Real Value：

page.tsx

import SecretInput from "@arisevan/react-secret-input";export default function Page() {  const [value, setValue] = useState("");  return (    <SecretInput      label="Full Name"      defaultValue="Zola Hanna"      onChange={(e) => setValue(e.target.value)}    />  )}

Custom Styles

Blink

Please enter a valid format.

Disabled

page.tsx

import SecretInput from "react-secret-input";export default function Page() {  return (    <>      <SecretInput        label="Blink"        defaultValue="Blink Blink Blink"        errorMessage="Please enter a valid format."        customClass={{          label: "text-amber-400",          input:            "border-amber-400/30  dark:border-amber-200/50 bg-amber-100/10 text-teal-400",          error: "text-pink-700 before:content-['*']",          disabled: "",        }}      />      <SecretInput        label="Disabled"        defaultValue="Blink Blink Blink"        disabled={true}        className="mt-4"        customClass={{          disabled: "opacity-50 bg-amber-100/40",        }}      />    </>  );};

Supports validation with React Hook Form

ID Number

page.tsx

import * as yup from "yup";import SecretInput from "react-secret-input";import { useForm, Controller } from "react-hook-form";const schemaDemo = yup.object({  name: yup.string().min(10, "Name must be at least 10 characters long"),});export default function Page() {  const {    control,    formState: { errors },  } = useForm({    resolver: yupResolver(schemaDemo),    mode: "onChange",  });  return (    <Controller      name="name"      control={control}      render={({ field }) => (        <SecretInput          label="ID Number"          className="w-full"          errorMessage={errors.name?.message}          {...field}        />      )}    />  );}

Props

This component extends the native <input> element, meaning you can use all standard input props (like id , disabled , maxLength , or autoFocus along with these additional custom props:

Prop	Type	Default	Description
`label`	string	－	The label text displayed above the input field.
`toggleVisible`	boolean	true	Determines whether the visibility toggle button is shown.
`defaultVisible`	boolean	false	Sets whether the input value is visible by default when the component is rendered.
`visibleCountFront`	number	1	Number of characters to remain visible at the start of the masked value.
`visibleCountEnd`	number	1	Number of characters to remain visible at the end of the masked value.
`maskChar`	string	*	The character used to mask hidden parts of the input value.
`errorMessage`	string	－	The character used to mask hidden parts of the input value.
`iconVisible` `iconUnVisible`	ReactNode	－	You can pass any React element (e.g., an icon component or JSX) to render a "show/hide" icon inside an input field.