# InlineEdit
> Text that can be edited in place: activate it to type, press Enter to save or Escape to cancel.
Category: Forms · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/inline-edit
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.
## Import
```tsx
import { InlineEdit } from '@bindshq/stance-react';
```
Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.
## Examples
### Template name
```tsx
import * as React from 'react';
import { InlineEdit } from '@bindshq/stance-react';
export function Basic() {
const [name, setName] = React.useState('Sales team signature');
return ;
}
```
### 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 (
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 ;
}
```
### 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 (
);
}
```
### Sizes and empty state
```tsx
import { InlineEdit } from '@bindshq/stance-react';
export function Sizes() {
return (
);
}
```
## API reference
| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| InlineEdit | `label` (required) | `string` | None | What is being edited, e.g. "template name". Names the read view “Edit