Password

Used to collect passwords.

Demo

React

SizeDefaultExtra SmallSmallMediumLargeExtra Large

Revealable

Invalid

Disabled

Read only

Vue

SizeExtra SmallSmallMediumLargeExtra Large

Revealable

Invalid

Disabled

Read only

Usage

React

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

return (
  <Password />
);

Vue

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

<template>
  <Password />
</template>

Props

React

Name	Type	Default	Description
value	string	—	The value of the password field
size	Size	md	The size of the password field
name	string	password	The name of the password field
revealable	boolean	false	Whether the password field value is revealable
invalid	boolean	false	Whether the password field value is invalid
disabled	boolean	false	Whether the password field is disabled
readOnly	boolean	false	Whether the password field is read only

Vue

Name	Type	Default	Description
model-value	string	—	The value of the password field 1
size	Size	md	The size of the password field
name	string	password	The name of the password field
revealable	boolean	false	Whether the password field value is revealable
invalid	boolean	false	Whether the password field value is invalid
disabled	boolean	false	Whether the password field is disabled
read-only	boolean	false	Whether the password field is read only

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
onReveal	(state: boolean) => void	Event handler for when the reveal state changes

Vue

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

Types

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'