Inline edit
Updated
InlineEdit shows text with a pixel pencil that turns into an input on click or Enter, for renaming a chart or a dashboard in place. Enter or leaving the input saves, Escape cancels, and the keyboard returns to the text either way. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
import "@/components/dithercharts/controls.css"
import { InlineEdit } from "@/components/dithercharts/inline-edit"
<InlineEdit label="Chart title" value={title} onValueChange={(next) => setTitle(next)} />
<InlineEdit label="Description" placeholder="Add a description" />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add inline-edit
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type string | Default – | What the text is, e.g. "Title": the input's accessible name, and read as "Edit Title" on the text. |
| value | Type string | Default – | The text, for a controlled field; pair it with onValueChange. |
| defaultValue | Type string | Default "" | The text at first, for an uncontrolled field. |
| onValueChange | Type (value: string) => void | Default – | Called with the new text when an edit is saved. |
| placeholder | Type string | Default "Empty" | Shown while the text is empty. |
| disabled | Type boolean | Default false | |
| className | Type string | Default – |