Component

DataEnum

Published on

Description

The DataEnum component maps a raw value to a human-readable label using a provided enum object. It renders a <data> element with the original value preserved and the mapped label displayed.

Use DataEnum when displaying statuses, types, or any value that maps to a known set of labels. For numeric formatting, use DataNumber.

Example

Open in new tab
View HTML markup 
<p><data value="active">Active</data></p>
<p><data value="inactive">Inactive</data></p>
<p><data value="pending">Pending review</data></p>
<p><data value="archived">Archived</data></p>

Accessibility

  • Renders as a <data> element with the raw value preserved in the value attribute
  • Screen readers announce the mapped label text
  • The semantic <data> element preserves the machine-readable value for assistive technologies

Variables

None