PasswordInput

The PasswordInput component is an input field designed specifically for handling password values.
It extends the base behavior of TextInput and includes a dedicated slot for a visibility toggle button, allowing users to show or hide the password content.

Like TextInput, it supports various slots for injecting UI elements before or after the input, and for customizing the input directly.

Usage

To use the PasswordInput component, simply import it and pass any required props.

import PasswordInput from '@components/Basic/PasswordInput/PasswordInput';

const App = () => {
    return (
        <PasswordInput />
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component.
ref	PasswordInputRef | undefined	undefined	A reference to the component that gives you access to its methods and the underlying HTML element. Useful if you need to set the value of the input programmatically.
value	string	""	The initial value of the input. Use this to set the initial value displayed on the input.
disabled	boolean	false	Disables the input if set to true.
readonly	boolean	false	Specifies if the input is only able to be read. If set to true, the input will not accept values.
max-symbols	number	undefined	Maximum number of symbols the input can accept.
class-disabled	string	undefined	Optional class to apply when the input is disabled.
onChange	(value: string) => void	undefined	A function that is called every time the input’s value has changed. It can be used to retrieve the up to date value of the input.

Methods

Method	Parameters	Return Value	Description
changeValue	newValue: string	void	Programmatically sets a new value in the input field.
clear	None	void	Clears the current value of the input.
show	None	void	Programmatically shows the value of the password input.
hide	None	void	Programmatically hides the value of the password input.

Accessors

Accessor	Return Value	Description
value	string	Returns the current value of the input reactively. Use value()to read the latest input.
visible	boolean	Indicates whether the password is currently visible. Use visible() to retrieve the current state reactively.

Slots

PasswordInput.Before

Allows the injection of content before the input element — useful for icons, labels, or additional UI elements.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the before slot container.
class	string	""	Additional CSS classes to style the before slot container.
children	JSX.Element	""	Content to be rendered inside the before slot. This can be used to add custom elements or styles.

Usage

import PasswordInput from '@components/Basic/PasswordInput/PasswordInput';
import Icon from @assets/icon.svg?component-solid;

const App = () => {
    return (
        <PasswordInput >
            <PasswordInput.Before>
                <Icon />
            </PasswordInput.Before>
        </PasswordInput>
    );
};

export default App;

PasswordInput.After

Allows the injection of content after the input element — ideal for suffixes, icons, or clear buttons.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the after slot container.
class	string	""	Additional CSS classes to style the after slot container.
children	JSX.Element	""	Content to be rendered inside the after slot. This can be used to add custom elements or styles.

Usage

import PasswordInput from '@components/Basic/PasswordInput/PasswordInput';
import BinIcon from @assets/icon.svg?component-solid;

const App = () => {
    return (
        <PasswordInput >
            <PasswordInput.After>
                <BinIcon />
            </PasswordInput.After>
        </PasswordInput>
    );
};

export default App;

PasswordInput.Input

Used to override or extend the internal input element. This gives you full control over the input’s look and behavior.

Properties

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the input element.
class	string	""	Additional CSS classes to style the input element.

Usage

import PasswordInput from '@components/Basic/PasswordInput/PasswordInput';

const App = () => {
    return (
        <PasswordInput >
            <PasswordInput.Input style={{ padding: '2vmax', color: 'white', background: 'black' }} />
        </PasswordInput>
    );
};

export default App;

PasswordInput.VisibilityButton

The VisibilityButton slot allows you to add a toggle button that shows or hides the password. By default, it renders a visibility icon (eye / eye-slash), but you can fully customize it by passing your own content by providing children isnide the slot component.

Note

If VisibilityButton is used, it overrides the Before or After slots, depending on the position of the button. You can’t use both at the same time.

Properties

Prop Name	Type	Default	Description
position	before | after	"after"	Determines whether the button appears before or after the input field.
style	JSX.CSSProperties	{}	Inline styles applied directly to the visibility button container.
class	string	""	Additional CSS classes for styling the button.
children	JSX.Element	""	Custom content to override the default visibility toggle icons.

Usage

import PasswordInput from '@components/Basic/PasswordInput/PasswordInput';

const App = () => {
    return (
        <PasswordInput >
            <PasswordInput.VisibilityButton />
        </PasswordInput>
    );
};

export default App;

Guide

Toggle input visibility programmatically

You can control the visibility of the password field programmatically using the component’s ref. This is useful when you want to trigger visibility toggling from external events like keypresses or buttons.

Steps

1. Declare a ref variable with type PasswordInputRef and pass it to the PasswordInput component.
2. Call ref.show() or ref.hide() to change the visibility.
3. Use ref.visible() to check whether the password is currently shown.

import PasswordInput  { PasswordInputRef } from '@components/Basic/PasswordInput/PasswordInput';

const App = () => {
    let inputRef: PasswordInputRef;

    const toggleVisiblity = (e: KeyboardEvent) => {
        if (e.keyCode !== 13) return

        inputRef!.visible() ? inputRef!.hide() : inputRef!.show();
    };

    return (
        <>
            <PasswordInput ref={inputRef!} />
            <button keypress={toggleVisiblity}>Toggle visibility</button>
        </>
    );
};

export default App;

Other Guides

All other usage patterns — like retrieving and setting values, or clearing the input — are identical to the TextInput component and can be seen here

Caution

When following those examples, make sure to use PasswordInputRef instead of TextInputRef when working with the ref. This ensures access to the additional show(), hide(), and visible() methods.