ReadonlyInput

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

Demo

React

SizeSmallMediumLarge

Masked

Copyable

Revealable

Value

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

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

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

Password

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

Vue

SizeSmallMediumLarge

Masked

Copyable

Revealable

Value

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

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

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

Password

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

Examples

With value prop

React

// Import component
import { ReadonlyInput } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/readonly_input.css';

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

Vue

<script setup lang="ts">
// Import component
import { ReadonlyInput } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/readonly_input.css';
</script>

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

Multiline variant

React

// Import component
import { ReadonlyInput } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/readonly_input.css';

return (
  <ReadonlyInput multiline>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br />
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </ReadonlyInput>
);

Vue

<script setup lang="ts">
// Import component
import { ReadonlyInput } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/readonly_input.css';
</script>

<template>
  <ReadonlyInput multiline>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br />
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </ReadonlyInput>
</template>

With HTML content

React

// Import components
import {
  Icon,
  ReadonlyInput,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';
// Import icons
import { faLock } from '@fortawesome/free-solid-svg-icons';

return (
  <ReadonlyInput
    copyable
    revealable
    masked
  >
    <div className="flex items-center gap-2">
      <Icon
        as={faLock}
        boxSize="1em"
      />

      <span>supersecretpassword</span>
    </div>
  </ReadonlyInput>
);

Vue

<script setup lang="ts">
// Import components
import {
  Icon,
  ReadonlyInput,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';
// Import icons
import { faLock } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <ReadonlyInput
    copyable
    revealable
    masked
  >
    <div class="flex items-center gap-2">
      <Icon
        :as="faLock"
        boxSize="1em"
      />

      <span>supersecretpassword</span>
    </div>
  </ReadonlyInput>
</template>

Wrapped in the Field component

React

// Import components
import {
  Field,
  ReadonlyInput,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';

return (
  <Field.Root
    label="Password"
    orientation="horizontal"
  >
    <ReadonlyInput
      value="supersecretpassword"
      copyable
      revealable
      masked
    />
  </Field.Root>
);

Vue

<script setup lang="ts">
// Import components
import {
  Field,
  ReadonlyInput,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';
</script>

<template>
  <Field.Root
    label="Password"
    orientation="horizontal"
  >
    <ReadonlyInput
      value="supersecretpassword"
      copyable
      revealable
      masked
    />
  </Field.Root>
</template>

Props

Name	Type	Default	Description
value	string | number | null	—	The value to display
size	FieldSize	md	The size of the component
multiline	boolean	false	Whether the value should be displayed as a multiline box (i.e. as a read-only textarea)
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

Slots

Slot name	Description
default	The content to display when the value is not masked

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'