ReadonlyInput

A lightweight read-only input component with copy and reveal functionality.

Demo

React

SizeSmallMediumLarge

Masked

Copyable

Revealable

Value

••••••••••••

Vue

SizeSmallMediumLarge

Masked

Copyable

Revealable

Value

••••••••••••

Example

React

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

return (
  <ReadonlyInput
    value="supersecretpassword"
    copyable
    revealable
    masked
  />
);

Vue

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

<template>
  <ReadonlyInput
    value="supersecretpassword"
    copyable
    revealable
    masked
  />
</template>

Props

Name	Type	Default	Description
value	string | number | null	—	The value to display
size	FieldSize	md	The size of the component
masked	boolean	false	Whether the value should be masked
copyable	boolean	false	Whether the value should be copyable
revealable	boolean	false	Whether the value should be revealable

Events

React

Name	Type	Description
onCopy	() => void	Event handler for when the value is copied
onReveal	(state: boolean) => void	Event handler for when the value is revealed or hidden

Vue

Name	Type	Description
copy	() => void	Event handler for when the value is copied
reveal	(state: boolean) => void	Event handler for when the value is revealed or hidden

Types

type FieldSize = 'sm' | 'md' | 'lg'