Design System

Rich text editor

Long-form, formatted text entry for notes, descriptions and announcements — built from the system's own icon buttons, selects and field chrome.

Rich text editor

One canonical editor. Trim the toolbar with the features prop instead of writing a second editor.

RichTextEditor

Formatted multi-line text entry: inline styles, super/subscript, font size, highlights, lists, alignment, links and images.

import { RichTextEditor } from "@/design-system";

When to use

  • Notes, descriptions, announcements and any field that needs emphasis or lists
  • Content that is stored and re-rendered as HTML

When not to use

  • Short single-line values — use Input
  • Plain unformatted paragraphs — use Textarea

Default

Formatting is preserved when the note is published.

Controlled value

The editor emits HTML on every edit.

<p>Resident settled well after the move. <strong>Follow-up review</strong> booked for next Tuesday.</p>

Compact toolbar

features trims the toolbar to what the field actually needs.

Error and disabled