Forms Preview Showcase

Forms Preview Showcase

A compact integration example that lets teams switch between a readonly review state and editable controls for the same form.

Live Preview

Features demonstrated

• form-preview.css with .dsx-preview and .dsx-preview__inner
• form-field.css labels and control wrappers for consistent layout
• inputs.css, select.css, and textarea.css for the edit state
• tabs.css to switch between Preview and Edit views
• status.css to render an inline badge inside a preview value
• .dsx-preview--disabled for locked fields the user can review but not change

When to use this pattern

Use this showcase for confirmation steps, readonly profile summaries, or approval screens where users need to compare preview and edit states without leaving the page.

Core pattern

<div class="dsx-tabs" role="tablist" aria-label="Switch between preview and edit mode">
  <button class="dsx-tabs__tab dsx-tabs__tab--active" type="button" onclick="toggleMode('preview')">Preview</button>
  <button class="dsx-tabs__tab" type="button" onclick="toggleMode('edit')">Edit</button>
</div>

<div class="dsx-field">
  <div class="dsx-field__label">Department</div>
  <div class="dsx-field__control">
    <div class="dsx-preview">
      <div class="dsx-preview__inner">
        <div class="dsx-preview__inner-content">Engineering</div>
      </div>
    </div>
  </div>
</div>

<script>
function toggleMode(mode) {
  document.getElementById('preview-mode').style.display = mode === 'preview' ? 'block' : 'none';
  document.getElementById('edit-mode').style.display = mode === 'edit' ? 'block' : 'none';
}
</script>

Related modules

• /css/form-preview/
• /css/form-field/
• /css/inputs/
• /css/select/
• /css/textarea/
• /css/tabs/
• /css/status/