Editable
Inline click-to-edit text field
Category: inputs · WCAG 2.2-AA · form, editable, inline, input, text
States
- preview
- editing
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The controlled value. |
onValueChange | (v: string) => void | — | Called with the new value when it changes. |
placeholder | string | — | Placeholder text shown when the field is empty. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
submitOnBlur | boolean | true | When true, commits the edit when the field loses focus. |
onCancel | () => void | — | Called when the edit is cancelled. |
id | string | — | Id for the **focusable control** (not the wrapper), so a `<label for>` names what actually takes focus. `Field` supplies this automatically. |
aria-labelledby | string | — | Wired automatically by a wrapping `Field` — its label id, forwarded to the focusable control so the Field's label names it. |
aria-describedby | string | — | Wired automatically by a wrapping `Field` — the ids of its hint/error text, forwarded to the focusable control so the supporting text is announced. |
aria-invalid | boolean | — | Wired automatically by a wrapping `Field` when it is in an error state. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-text--cascivo-color-text-muted--cascivo-color-bg-subtle--cascivo-radius-sm--cascivo-focus-ring
When to use
- Editing a single piece of text in place where the value is normally read-only — titles, names, labels
- Keeping the page layout stable: the preview and the edit input occupy the same spot
- Letting users opt into editing by clicking, without a separate edit mode or form
When not to use
- A field that is always meant to be edited — use Input inside a Form instead
- Multi-line or rich text — this is a single-line input only
- Collecting several related values at once — use a Form with grouped fields
How to build an accessible Editable in React →
Examples
Basic
<Editable value="Click to edit" onValueChange={() => {}} />With placeholder
<Editable value="" onValueChange={() => {}} placeholder="Enter text" />Related components
- Input — Use Input when the field is always editable rather than click-to-reveal