---
title: Editable Text
description: An inline editable text component that toggles between display and edit modes on click.
icon: pencil
author:
  name: eblairmckee
  url: https://github.com/eblairmckee
mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/editable-text
```

<ComponentPreview name="editable-text-demo" />

## Usage

```tsx lineNumbers
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.

<ComponentPreview name="editable-text-demo" />

### Heading Variants

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

<ComponentPreview name="editable-text-heading-demo" />

### Read Only

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

<ComponentPreview name="editable-text-read-only-demo" />

## 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)