Inline editable field
Click-to-edit pattern for titles, descriptions, and metadata that live in-context. Commits on Enter (or ⌘↵ for multiline) and cancels on Escape.
Included in the single kansho full pack. Components are not offered as separate installs.
Title, summary, meta
Usage
Guidance- Use it for edit-in-place fields like titles, names, and summaries.
- Pass validate to block invalid commits with an inline message.
- Set multiline for longer free text; commit shifts to Cmd / Ctrl + Enter.
- Use it for a form with several fields — reach for real inputs.
- Discard edits silently — Escape cancels back to the last committed value.
- When to use
- Lightweight, single-value edits that live inline in a row or header.
- When not to
- Multi-field forms or anything needing a submit button.
Accessibility
Keyboard & screen readerKeyboard
- EnterSpace
- Enter edit mode from the display control.
- Enter
- Commit the value (single-line mode).
- CmdEnter
- Commit the value (multiline mode).
- Escape
- Cancel and restore the last committed value.
Announces
- The edit control carries an aria-label derived from label.
- A failed validation renders in a role=alert region.
Props
API reference| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | string | — | Current committed value. |
| onCommitrequired | (next) => void | — | Fires with the new value on commit. |
| placeholder | string | — | Shown when the value is empty. |
| multiline | boolean | false | Multiline editor; commit becomes Cmd / Ctrl + Enter. |
| label | string | — | Accessible label folded into the edit control's name. |
| size | 'sm' | 'md' | 'lg' | 'md' | Type-scale preset. |
| validate | (v) => string | null | — | Return an error message to block the commit, or null to allow it. |
Component documentation
Inline Editable
components/inputs/inline-editable.tsxPurpose
Switches text between a read view and an inline text or textarea editor.
Appropriate use
Use for short, low-risk edits that benefit from staying in surrounding context.
Example
components/inputs/inline-editable.tsx has a representative live example in the "Title, summary, meta" section on /components/inline-editable.
States
Supports display and editing modes, single-line or multiline input, validation error, empty placeholder, commit, and cancel.
API and props
InlineEditable accepts value, onCommit, placeholder, multiline, label, size, className, and validate.
Dependencies
React, Lucide icons, and the Kansho cn utility.
Accessibility
Names edit, commit, and cancel controls; Enter commits single-line edits, Escape cancels, invalid input is described and announced as an alert.
Limitations
onCommit is synchronous and the component has no built-in saving, loading, or server-error state.
Source
Source: components/inputs/inline-editable.tsx.
Full pack
components/inputs/inline-editable.tsx is documented at /components/inline-editable and installs only through the single Kansho full pack; no individual component install is offered.