Editable Text

An inline editable text component that toggles between display and edit modes on click.

Installation

bash

npx shadcn@latest add @redpanda/editable-text

bash

pnpm dlx shadcn@latest add @redpanda/editable-text

bash

yarn dlx shadcn@latest add @redpanda/editable-text

bash

bunx shadcn@latest add @redpanda/editable-text

bash

nubx shadcn@latest add @redpanda/editable-text

bash

aube dlx shadcn@latest add @redpanda/editable-text

Usage

tsx

import { EditableText } from '@/components/redpanda-ui/editable-text';
<EditableText  label="Topic name"  value={value}  onChange={(newValue) => setValue(newValue)}  placeholder="Click to edit..."/>;

Examples

Basic Text

Click the text to activate the inline input. Press Enter or click away to confirm. Press Escape to cancel.

Heading Variants

Use as="heading" with headingLevel (1–5) to render editable headings with matching typography.

Read Only

Set readOnly to disable editing. The component renders as static text with no focus or click handling.

Props

Prop	Type	Default	Description
`label`	`string`	Required	Stable accessible name for the editing field
`value`	`string`	—	The current text value
`onChange`	`(value: string) => void`	—	Called when the user commits a change (on blur or Enter)
`onBlur`	`() => void`	—	Called when the input loses focus
`placeholder`	`string`	—	Placeholder text shown when value is empty
`readOnly`	`boolean`	`false`	Disables editing
`as`	`'text' \| 'heading'`	`'text'`	Typography style variant
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5`	`1`	Heading size when `as="heading"`
`error`	`boolean`	`false`	Shows error styling on the input border
`errorMessage`	`string`	—	Error message displayed below the input
`autoFocus`	`boolean`	`false`	Starts in edit mode
`className`	`string`	—	Additional class names

Behavior

Click to edit: Clicking the display text activates the inline input
Keyboard navigation: Focusable via Tab; activates with Enter or Space
Commit on blur: Changes are committed when the input loses focus
Cancel with Escape: Pressing Escape discards changes and reverts to the original value
Enter to confirm: Pressing Enter blurs the input and commits the change

When to use

Use EditableText for in-place editing of short text values — names, titles, labels — where a full form would be too heavy:

Pipeline or topic names in a detail view
Editable page or section headings
Inline renaming of list items

Don’t use when:

The text is longer than a single line (use a Textarea instead)
The field requires complex validation that needs a submit button
The edit action should be explicit (use a dedicated form or dialog)

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133

minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121

minorv1.0.0Post-Base-UI polish. Public API unchanged.#116

majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114

minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →