1.22.2
Back to components
Components

DataField

Form field component to display read-only data.

Component

Example data

Example help text

Props

Props Required Default Type
idtrue — string
label — — string
ariaLabel — — string
text — — string | number
emptyText — 'Not defined'string
helpText — — string
helpTextPosition — Position.BOTTOMPosition
hasCopyToClipboardButton — falseboolean
copyToClipboardMessage — 'Copied to clipboard'string
copyToClipboardErrorMessage — 'Failed to copy to clipboard'string

Slots

Name Description
default

Template to custom content instead of the text or emptyText props.

 <template>
    <DataField>
        <!-- Custom content here -->
    </DataField>
</template>

Usage

id

Sets the id of the field.

 <template>
    <DataField id="field-id" />
</template>
  • Type: string
  • Required: true

label

Sets the label of the field.

 <template>
    <DataField label="Sample label" />
</template>
  • Type: string

ariaLabel

Sets the accessible name used by the copy-to-clipboard icon button.

 <template>
    <DataField
        text="12345"
        :hasCopyToClipboardButton="true"
        ariaLabel="Copy account value"
    />
</template>
  • Type: string

text

Sets the text to display in the field.

 <template>
    <DataField text="Example data" />
</template>
  • Type: string | number

emptyText

Sets the text to display when there is no data.

 <template>
    <DataField emptyText="Not defined" />
</template>
  • Type: string
  • Default: 'Not defined'

helpText

Sets the help text for the field.

 
<template>
    <DataField helpText="Example help text" />
</template>
  • Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <DataField helpTextPosition="top" helpText="Appears above the field" />
</template>
  • Type: Position
  • Default: Position.BOTTOM

Options

Value Description
TOP

top

BOTTOM

bottom

hasCopyToClipboardButton

Determines whether to show a copy to clipboard button.

 <template>
    <DataField :hasCopyToClipboardButton="false" />
</template>
  • Type: boolean
  • Default: false

copyToClipboardMessage

Sets the message to display when the text is successfully copied to the clipboard.

 
<template>
    <DataField copyToClipboardMessage="Copied to clipboard" />
</template>
  • Type: string
  • Default: 'Copied to clipboard'

copyToClipboardErrorMessage

Sets the message to display when there is an error copying the text to the clipboard.

 <template>
    <DataField copyToClipboardErrorMessage="Failed to copy to clipboard" />
</template>
  • Type: string
  • Default: 'Failed to copy to clipboard'