Form Preview

Readonly preview boxes with optional footer text for @bnotk/dsx form layouts.

Live Preview

This primitive is usually easiest to understand inside the full Forms Preview showcase, where labels, values, sections, and footer text appear together in a realistic read-only flow.

Import

<link rel="stylesheet" href="@bnotk/dsx/css/form-preview.css">

Classes

Class	Purpose
`.dsx-preview`	Wrapper for a readonly preview field
`.dsx-preview__inner`	Bordered preview surface
`.dsx-preview__inner-content`	Main readonly value
`.dsx-preview__inner-footer`	Optional secondary text below the value
`.dsx-preview--disabled`	Muted disabled state with grey border and text

Behavior

Uses an inset border with grey-4 by default.
Keeps a minimum field width of 14.125rem and a minimum height of 2rem.
Preserves line breaks with white-space: pre-wrap.
Hides empty content and footer slots automatically.
Switches border and text to grey-3 in the disabled state.

Example

<div class="dsx-preview">
  <div class="dsx-preview__inner">
    <div class="dsx-preview__inner-content">Max Mustermann</div>
    <div class="dsx-preview__inner-footer">Verified on 12 Sep 2025</div>
  </div>
</div>

Accessibility notes

Pair previews with visible labels so the value keeps its form context.
Use readonly previews only for non-editable data.
Preserve semantic line breaks for addresses and other multi-line values.