InlineEdit

Stable

Text that can be edited in place: activate it to type, press Enter to save or Escape to cancel.

Use InlineEdit for a single value people change now and then where they read it: a template name, a document title, a short note. For several related fields, or values that need explanation, use a form with FormField instead.

Source Edit docs Report an issue

Overview

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function Basic() {
  const [name, setName] = React.useState('Sales team signature');
  return <InlineEdit label="template name" value={name} onCommit={setName} size="lg" />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { InlineEdit } from '@bindshq/stance-react';

Examples

Validation

validate returns an error message to reject a value. The editor stays open so it can be fixed.

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function WithValidation() {
  const [name, setName] = React.useState('Master services agreement');
  return (
    <InlineEdit
      label="document title"
      value={name}
      onCommit={setName}
      validate={(v) =>
        v.length < 3
          ? 'Enter at least 3 characters.'
          : v.length > 60
            ? 'Keep the title under 60 characters.'
            : undefined
      }
    />
  );
}

Confirm and cancel buttons

With showActions, leaving the field no longer saves; people choose explicitly.

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function WithActions() {
  const [domain, setDomain] = React.useState('binds.si');
  return <InlineEdit label="reply-to domain" value={domain} onCommit={setDomain} showActions />;
}

Multiline

Enter adds a line and Ctrl/⌘+Enter saves.

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function Multiline() {
  const [note, setNote] = React.useState('Countersign by Friday.\nSend a copy to legal@binds.si.');
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <InlineEdit label="note" value={note} onCommit={setNote} multiline placeholder="Add a note" />
    </div>
  );
}

Sizes and empty state

MSA-2026-014

tsx

import { InlineEdit } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 12, justifyItems: 'start' }}>
      <InlineEdit label="team" defaultValue="Legal" size="sm" />
      <InlineEdit label="owner" defaultValue="Priya Nair" size="md" />
      <InlineEdit label="job title" placeholder="Add a job title" size="md" />
      <InlineEdit label="reference" defaultValue="MSA-2026-014" readOnly />
    </div>
  );
}

API reference

Prop	Type	Default	Description
`label`* required	`string`	None	What is being edited, e.g. "template name". Names the read view “Edit <label>” and the input.
`value`	`string`	None	Controlled committed value.
`defaultValue`	`string`	`''`	Initial value when uncontrolled.
`onCommit`	`(value: string) => void`	None	Called with the new value when it changes and is saved.
`onCancel`	`() => void`	None	Called when editing is cancelled.
`validate`	`(value: string) => string \| undefined`	None	Return an error message to reject the value and keep editing.
`placeholder`	`string`	`'Add a value'`	Shown in the read view when the value is empty.
`multiline`	`boolean`	`false`	Edit in a textarea.
`showActions`	`boolean`	`false`	Show Save and Cancel buttons while editing.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Text size, to match the surrounding content.
`trim`	`boolean`	`true`	Trim whitespace before saving.
`defaultEditing`	`boolean`	`false`	Start in edit mode.
`disabled`	`boolean`	`false`	Shows the value as a disabled button.
`readOnly`	`boolean`	`false`	Shows the value as plain text with no edit affordance.
`labels`	`Partial<InlineEditLabels>`	None	Translations for the Save and Cancel buttons.

Accessibility

The read view is a real button named “Edit <label>: <value>”, so it is reachable by keyboard and announces what activating it does.
Entering edit mode moves focus to the input and selects the text; saving or cancelling returns focus to the read view.
Validation errors are linked to the input and announced immediately, and the editor stays open.
The pencil icon appears on hover and focus, and is always visible on touch screens where there is no hover.
With showActions, Save and Cancel are labelled buttons that stay inside the editor’s focus area.

Keyboard

Keys	Action
`Enter` `Space`	On the read view: starts editing.
`Enter`	While editing: saves. In multiline mode it adds a line.
`Ctrl/⌘` `Enter`	In multiline mode: saves.
`Esc`	Cancels and restores the previous value.
`Tab`	Leaves the field, saving the value (unless showActions is on).

Usage guidelines

Do

Use a specific label: “template name”, not “value”.
Use showActions when a change has consequences people should confirm.

Don’t

Use it for several fields that are saved together; use a form.
Rely on it for required information that has no value yet; ask for it in a form.

Overview

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function Basic() {
  const [name, setName] = React.useState('Sales team signature');
  return <InlineEdit label="template name" value={name} onCommit={setName} size="lg" />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Examples

Validation

validate returns an error message to reject a value. The editor stays open so it can be fixed.

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function WithValidation() {
  const [name, setName] = React.useState('Master services agreement');
  return (
    <InlineEdit
      label="document title"
      value={name}
      onCommit={setName}
      validate={(v) =>
        v.length < 3
          ? 'Enter at least 3 characters.'
          : v.length > 60
            ? 'Keep the title under 60 characters.'
            : undefined
      }
    />
  );
}

Confirm and cancel buttons

With showActions, leaving the field no longer saves; people choose explicitly.

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function WithActions() {
  const [domain, setDomain] = React.useState('binds.si');
  return <InlineEdit label="reply-to domain" value={domain} onCommit={setDomain} showActions />;
}

Multiline

Enter adds a line and Ctrl/⌘+Enter saves.

tsx

import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';

export function Multiline() {
  const [note, setNote] = React.useState('Countersign by Friday.\nSend a copy to legal@binds.si.');
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <InlineEdit label="note" value={note} onCommit={setNote} multiline placeholder="Add a note" />
    </div>
  );
}

API reference

Prop	Type	Default	Description
`label`* required	`string`	None	What is being edited, e.g. "template name". Names the read view “Edit <label>” and the input.
`value`	`string`	None	Controlled committed value.
`defaultValue`	`string`	`''`	Initial value when uncontrolled.
`onCommit`	`(value: string) => void`	None	Called with the new value when it changes and is saved.
`onCancel`	`() => void`	None	Called when editing is cancelled.
`validate`	`(value: string) => string \| undefined`	None	Return an error message to reject the value and keep editing.
`placeholder`	`string`	`'Add a value'`	Shown in the read view when the value is empty.
`multiline`	`boolean`	`false`	Edit in a textarea.
`showActions`	`boolean`	`false`	Show Save and Cancel buttons while editing.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Text size, to match the surrounding content.
`trim`	`boolean`	`true`	Trim whitespace before saving.
`defaultEditing`	`boolean`	`false`	Start in edit mode.
`disabled`	`boolean`	`false`	Shows the value as a disabled button.
`readOnly`	`boolean`	`false`	Shows the value as plain text with no edit affordance.
`labels`	`Partial<InlineEditLabels>`	None	Translations for the Save and Cancel buttons.

Accessibility

The read view is a real button named “Edit <label>: <value>”, so it is reachable by keyboard and announces what activating it does.

Entering edit mode moves focus to the input and selects the text; saving or cancelling returns focus to the read view.

Validation errors are linked to the input and announced immediately, and the editor stays open.

The pencil icon appears on hover and focus, and is always visible on touch screens where there is no hover.

With showActions, Save and Cancel are labelled buttons that stay inside the editor’s focus area.

Keyboard

Keys	Action
`Enter` `Space`	On the read view: starts editing.
`Enter`	While editing: saves. In multiline mode it adds a line.
`Ctrl/⌘` `Enter`	In multiline mode: saves.
`Esc`	Cancels and restores the previous value.
`Tab`	Leaves the field, saving the value (unless showActions is on).

Overview

Light, dark and high contrast

Import

Examples

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Examples

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related