PasswordInput

Used to collect passwords.

Demo

React
Vue

Example

React
Vue

// Import component
import { PasswordInput } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that you need to import the styles
// for Field and PasswordInput components since the PasswordInput component
// is using Field component.
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/password.css';

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

<script setup lang="ts">
// Import component
import { PasswordInput } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that you need to import the styles
// for Field and PasswordInput components since the PasswordInput component
// is using Field component.
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/password.css';
</script>

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

Props

React
Vue

Name	Type	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`	`FieldSize`	`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

Name	Type	Default	Description
`model-value`	`string`	—	Controlled value of the text input ¹
`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`	`FieldSize`	`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

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

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

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

Types

type FieldSize = 'sm' | 'md' | 'lg';
type Orientation = 'horizontal' | 'vertical';