PasswordInput

Used to collect passwords.

Demo

React

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Revealable

Required

Invalid

Read only

Disabled

Password

Please enter your password

Vue

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Revealable

Required

Invalid

Read only

Disabled

Password

Please enter your password

Usage

React

import { PasswordInput } from '@fintech-sandpit/ui/react';

return (
  <PasswordInput
    label="Password"
    hint="Please enter your password"
    error="Invalid password"
  />
);

Vue

<script setup lang="ts">
import { PasswordInput } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <PasswordInput
    label="Password"
    placeholder=""
    hint="Please enter your password"
    error="Invalid password"
  />
</template>

Props

React

Name	Type	Required	Default	Description
value	string		—	Controlled value of the text input
defaultValue	string		—	Default (uncontrolled) value of the text input
name	string		password	Name of the password input
orientation	Orientation		vertical	Orientation of the text input
size	Size		md	Size of the text input
revealable	boolean		false	Whether the password input is revealable
label	string		—	Label of the text input
hint	string		—	Helper text of the text input
error	string		—	Error text of the text input
required	boolean		false	Whether the text input is required
invalid	boolean		false	Whether the text input is invalid
readOnly	boolean		false	Whether the text input is read only
disabled	boolean		false	Whether the text input is disabled
placeholder	string		—	Placeholder of the text input

Vue

Name	Type	Required	Default	Description
model-value	string		—	Controlled value of the text input 1
default-value	string		—	Default (uncontrolled) value of the text input
name	string		password	Name of the password input
orientation	Orientation		vertical	Orientation of the text input
size	Size		md	Size of the text input
revealable	boolean		false	Whether the password input is revealable
label	string		—	Label of the text input
hint	string		—	Helper text of the text input
error	string		—	Error text of the text input
required	boolean		false	Whether the text input is required
invalid	boolean		false	Whether the text input is invalid
read-only	boolean		false	Whether the text input is read only
disabled	boolean		false	Whether the text input is disabled
placeholder	string		—	Placeholder of the text input

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Type	Description
onChange	(value: string) => void	Event handler for when the value changes

Vue

Name	Type	Description
update:model-value	(value: string) => void	Event handler for when the value changes

Types

type Orientation = 'horizontal' | 'vertical';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';