Editable TextNew

Text you click to change in place: a name, a title, a label.

$ pnpm dlx shadcn@latest add @dashral/editable-text

Installation

$ pnpm dlx shadcn@latest add @dashral/editable-text

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/editable-text.json

Usage

example.tsx

1import { EditableText } from "@/components/dashral/editable-text"
2
3<EditableText label="Project name" value={project.name} onValueChange={(name) => api.projects.rename(project.id, name)} required className="text-2xl font-semibold" />

Using the npm package? Import from @dashral/ui/components/editable-text instead, here and in the examples; the rest is the same.

Examples

Saving to a server

A spinner while it saves; a rejected save puts it back with the reason. Try "admin".

Workspace URL

app.example.com/

In rows

Rename each stage in place; Tab moves on, Escape puts it back.

API reference

EditableText

Prop	Type	Default
`label`	`string` What the text is, for screen readers: the button reads "Edit" and it. Required.	—
`value / defaultValue`	`string` The text, controlled or initial.	`""`
`onValueChange`	`(value: string) => void \| Promise` Called with the saved text (Enter or leaving), not on every keystroke. Return a promise: a spinner shows, and a rejection puts the text back with its message.	—
`placeholder`	`string` Shown, muted, while it's empty.	—
`required`	`boolean` An empty edit is refused with a message.	`false`
`validate`	`(value: string) => string \| undefined` Return a message to refuse an edit.	—
`maxLength`	`number` As on an input.	—
`disabled`	`boolean` It can't be edited.	`false`
`className`	`string` Shared by the text and its field (size, weight), so switching moves nothing.	—
`classNames`	`{ error }` The error message's classes.	—

Keyboard

Keys	Action
`Enter`or`Space`	Start editing (on the text)
`Enter`	Save
`Escape`	Put it back and stop editing
`Tab`	Save and move on

Accessibility

The text is a button named "Edit" and the label; editing, it's an input with the label as its name, the text selected.
After Enter or Escape the focus goes back to the text; a refused edit stays open with its message, announced.

Motion

The pencil fades in on hover and focus (always shown on touch screens); the field fades in over the text in the same box, so nothing shifts.