In context
Inline formatting toolbar, layout view-mode picker, paragraph alignment with live preview, and a table density selector.
Inline formatting
Multi-select toggle group with controlled value.
Layout
Active: grid
Paragraph alignment
Single-select toggle group drives a live preview.
Sample copy showing the current alignment selection. Switch between left, center, and right to see the inline change.
Table density
Use `Toggle` standalone for simple two-state switches.
Outline variant
<Toggle pressed={pressed} onPressedChange={setPressed} variant="outline">
Underline
</Toggle>Multi-select group
const [formats, setFormats] = useState<string[]>([]);
<ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
<ToggleGroupItem value="bold">B</ToggleGroupItem>
<ToggleGroupItem value="italic">I</ToggleGroupItem>
<ToggleGroupItem value="underline">U</ToggleGroupItem>
</ToggleGroup>Disabled
<Toggle pressed={false} onPressedChange={() => {}} disabled>
Disabled
</Toggle>