MarkdownField

A text area for Markdown with a preview tab, for descriptions and comments. Pick it when the text will be shown rendered; use a plain TextField for short values.

MarkdownField

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, MarkdownField

Description

Write

Preview

Markdown is supported: **bold**, lists, links and code.

Notes (disabled)

Write

Preview

Dark theme, MarkdownField

Description

Write

Preview

Markdown is supported: **bold**, lists, links and code.

Notes (disabled)

Write

Preview

High contrast theme, MarkdownField

Description

Write

Preview

Markdown is supported: **bold**, lists, links and code.

Notes (disabled)

Write

Preview

UsageLink to the section Usage

tsx

import { MarkdownField } from '@skribly/ui/content'

tsx

<MarkdownField
  label="Description"
  writeLabel="Write"
  previewLabel="Preview"
  emptyPreview="Nothing to preview yet."
  value={text}
  onChange={setText}
  isInvalid={!text}
  errorMessage="Enter a description."
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The label names the text area and the tab list.
Arrow keys move between Write and Preview, and the text stays when you switch.
The description and the error are linked with aria-describedby, and aria-invalid is set.
The open tab is marked by shape, not only colour, and stays visible in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.