FormImmutableText since v0.40.0

A span element wrapped inside a labelled form element. Does not allow any user input, hence the name. Use this component to add immutable form elements e.g. to display an API key, or other value that might be interesting to the user.

By default, the component will render a copy-to-clipboard button to allow for easier copy and pasting the component's value.

Preview

Example

<template>
  <FormImmutableText id="FormImmutableInputApiKey"
                     label="Your Api Key"
                     description="Please enter a valid zip code"
                     :text="apiKey" />
</template>

<script setup>
import { FormImmutableText } from '@discue/ui-components';
</script>