Rich Text Editor
Toolbar-driven content editor for formatted HTML input.
When To Use
- Use Rich Text Editor when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
value, onChange, placeholder, minHeight, id, className
Example Code
import { RichTextEditor } from "@hilum/ui"
const [html, setHtml] = React.useState("<h2>Launch notes</h2><p>Draft the release summary.</p>")
<RichTextEditor
value={html}
onChange={setHtml}
placeholder="Write the update..."
minHeight={220}
/>Editor
Content editor
Controlled HTML value with formatting, lists, links, images, and horizontal rules.
Launch notes
Draft the release summary, include the customer impact, and link the migration guide.
Compact
Short form field
Use a smaller minimum height for descriptions and editorial metadata.
Describe the product in one paragraph.