Skip to content
See live

Rich editor

A RichEditor renders its toolbars as Material toolbars, a component introduced by Material 3 Expressive. The docked toolbar is square against the editor it belongs to; the floating one is a pill above the content at elevation 3.

A rich editor with its toolbar above the content areaA rich editor with its toolbar above the content area
php
use Filament\Forms\Components\RichEditor;

RichEditor::make('body');

Behavior

PartWhat it takes
ToolbarSurface-container, controls 8dp apart
ToolFully rounded, transparent, with a state layer
Active toolSecondary container, whether marked by class or by aria-pressed
Dropdown tool menuThe menu sheet at elevation 2
ContentBody-large on the plain ink
Custom blockSurface-container-low, with its heading in title-small

Material draws a toolbar 64dp tall. That is not carried over here: these wrap onto a second line, and a fixed height would either clip the wrap or leave the single-line case half empty.

Rendered output

Content rendered back out through Filament's prose class takes the type scale: headings from the headline and title styles, links in primary, code on surface-container-high, and quotes behind a 2dp rule in the outline-variant color.