Skip to content
Pinky UI

forms

Contextual Formatting Bar

A small formatting surface appears beside a real text selection instead of floating independently from the editor.

  • forms
  • formatting
  • selection
  • contenteditable
  • toolbar
Related pattern

Selection-attached formatting context; not a general rich text editor.

Live preview

Handoff note

Select a phrase to format.

Select text to reveal the attached tools. No floating editor is created outside the field.

Quick usage

usage
import { ContextualFormattingBar } from "@pinky-ui/systems";

<ContextualFormattingBar label="Project note" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
defaultContentstring—The editable sample content that can receive local emphasis.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The editor has a label and the attached toolbar exposes real pressed states for Bold and Italic.
  • The toolbar stays related to the selected content and can be reached without relying on pointer position.

Performance

  • A selection listener is attached only for the editor lifecycle and formatting is limited to the local surface.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Short notes, labels and content snippets with lightweight emphasis needs

When not to use

  • Full rich-text authoring, collaboration or document history

Skill

Purpose

Use Contextual Formatting Bar when a short editable text surface needs lightweight emphasis controls tied to a real selection.

Interaction

Render the editable content first. Reveal the small toolbar beside a non-empty selection and keep it attached to the editor bounds; do not create a detached global toolbar.

Usage

tsx
<ContextualFormattingBar label="Handoff note" defaultContent="Select a phrase to format." />

Accessibility

Label the editable surface and toolbar, expose Bold and Italic pressed states, and keep the controls keyboard reachable. This pattern is not a substitute for a complete rich-text editor.

Reduced motion

Show or hide the toolbar immediately. Selection context and formatting state must not depend on travel or fade timing.

Open this skill on its own page