RICH TEXT EDITOR: WYSIWYG editing container with toolbar, content area, and footer
CLASSES: .rte | .rte-toolbar | .rte-toolbar-group | .rte-toolbar-btn | .rte-toolbar-select | .rte-content | .rte-footer
SIZES: Default | .rte-sm | .rte-lg
STATES: Default | Disabled | .is-invalid | .is-valid

Visual container for rich text editing. The toolbar is composed of groups separated by vertical dividers, each containing icon buttons or a block-format select. Content area uses contenteditable or wraps a JS editor library. Optional footer for hint text.

Default

Full toolbar: Paragraph select, formatting (Bold/Underline/Italic), alignment (4 options), strikethrough/link, and overflow menu. Includes footer hint.

Please press Shift + Enter for new line
<div class="tw-rte"><div class="tw-rte-toolbar">...</div><div class="tw-rte-content" contenteditable="true"></div><div class="tw-rte-footer">...</div></div>

Extended Toolbar

Rich toolbar: Paragraph select, inline formatting + lists, alignment, media inserts (image, quote, table, video), and undo/redo. No footer.

Toolbar groups are flexible — add/remove buttons by changing the HTML structure.

With Content

Pre-populated: Editor with existing content. Active formatting buttons reflect current state.

Dear Mr. and Mrs. Clarke,

Thank you for your enquiry regarding admission to St Mary's School for the September 2024 intake. We are delighted that you are considering our school for Oscar's education.

I would like to invite you to attend our upcoming Open Morning on Saturday, 15th March, where you will have the opportunity to tour our facilities and meet our teaching staff.

Please do not hesitate to contact us if you have any questions in the meantime.

Kind regards,
Rachel Morrison
Admissions Manager

Please press Shift + Enter for new line

Sizes

Small (.rte-sm): Compact editor for inline contexts. Default: Standard size. Large (.rte-lg): Expanded content area for long-form editing.

Small (.rte-sm)

Default

Large (.rte-lg)

Press Shift + Enter for new line

States

Disabled (.disabled): Grayed out, no interaction. Invalid (.is-invalid): Red border for validation errors. Valid (.is-valid): Green border for valid input.

Disabled (.disabled)

This field is currently disabled and cannot be edited.

Invalid (.is-invalid)

Email body is required.

Valid (.is-valid)

Content has been validated successfully.

Looks good!

Toolbar Button States

Toolbar buttons support default, hover, active (pressed), disabled, and focus-visible states. Active buttons indicate currently applied formatting.

Default | .active (pressed) | :disabled (grayed)