Editable Text
An inline editable text component that toggles between display and edit modes on click.
Made by eblairmckeeLoading component...
Installation
Usage
import { EditableText } from "@/components/redpanda-ui/editable-text"
<EditableText
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.
Loading component...
Heading Variants
Use as="heading" with headingLevel (1–5) to render editable headings with matching typography.
Loading component...
Read Only
Set readOnly to disable editing. The component renders as static text with no focus or click handling.
Loading component...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
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
Textareainstead) - The field requires complex validation that needs a submit button
- The edit action should be explicit (use a dedicated form or dialog)
Built by malinskibeniamin. The source code is available on GitHub.