ReadonlyInput

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

Demo

React
Vue

Size

Masked

Copyable

Revealable

Value

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

Usage

React
Vue

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

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

<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`	`Size`	`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

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

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 Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'