@neo4j-ndl/react/skills/ndl-react/components/inline-edit.md

React implementation of Neo4j Design System

# InlineEdit

Import: `import { InlineEdit } from '@neo4j-ndl/react'`

## Props

### InlineEdit

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `blurBehavior` | `'cancel' \| 'confirm' \| 'none'` |  | `confirm` | What the input should do on blur - "confirm" will confirm the value - "cancel" will cancel the value - "none" will do nothing |
| `defaultValue` | `string` |  |  | The default input value. Use for an uncontrolled component. |
| `hasEditIcon` | `boolean` |  | `false` | If edit pencil icon should be visible on hover |
| `inputProps` | `HtmlAttributes<"input">` |  |  | props applied to the internal input element |
| `isDisabled` | `boolean` |  | `false` |  |
| `isEditing` | `boolean` |  | `undefined` | If the input is in editing mode Used in a stateless inline edit |
| `isFluid` | `boolean` |  | `false` | If the input is fluid |
| `label` | `ReactNode` |  |  | Label text |
| `onCancel` | `((event?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | Callback when cancel icon button is pressed |
| `onChange` | `((value: string) => void)` |  |  | Callback when the input value changes. Must be used when the component is controlled. |
| `onConfirm` | `((value: string, event?: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | Callback when confirm icon button is pressed |
| `placeholder` | `string` | ✅ |  | Placeholder text displayed when the input is empty. |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `typographyVariant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` |  | `subheading-medium` | The typographyVariant of the component applied to Typography as its variant. |
| `value` | `string` |  |  | The input value. Makes the component controlled. |

## Accessibility

## Implementation guidelines

The InlineEdit component provides an accessible inline editing experience. It includes proper ARIA labels, keyboard navigation support (Enter to confirm, Escape to cancel), and focus management. The component supports both controlled and uncontrolled modes, with appropriate screen reader announcements for state changes.

## Examples

### Default

```tsx
import { InlineEdit } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [value, setValue] = useState('Database Name 1');

  return (
    <InlineEdit
      label="Editable inline edit ✨"
      placeholder="Placeholder"
      defaultValue={value}
      onConfirm={setValue}
    />
  );
};

export default Component;
```

### Controlled Editing

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <InlineEdit
      isEditing={true}
      label="Controlled Editing"
      placeholder="Placeholder"
      defaultValue="Database Name 1"
    />
  );
};

export default Component;
```

### Controlled Value

```tsx
import { InlineEdit } from '@neo4j-ndl/react';
import { useRef, useState } from 'react';

const Component = () => {
  const initialValue = 'Controlled Value';
  const [value, setValue] = useState(initialValue);
  const previousValueRef = useRef(initialValue);

  return (
    <InlineEdit
      label="Controlled value"
      placeholder="Placeholder"
      value={value}
      onChange={setValue}
      onConfirm={(newValue, event) => {
        previousValueRef.current = newValue;
        event?.stopPropagation();
      }}
      onCancel={(event) => {
        setValue(previousValueRef.current);
        event?.stopPropagation();
      }}
    />
  );
};

export default Component;
```

### Disabled

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => (
  <InlineEdit
    defaultValue="Database Name 1"
    isDisabled={true}
    label="Disabled inline edit ⛔"
    placeholder="Placeholder"
  />
);

export default Component;
```

### Fluid

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <InlineEdit
      label="Inline edit with fluid width"
      placeholder="Placeholder"
      defaultValue="hello"
      isFluid={true}
    />
  );
};

export default Component;
```

### Header

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <InlineEdit
      defaultValue="Database Name 1"
      typographyVariant="display"
      placeholder="Placeholder"
    />
  );
};

export default Component;
```

### No Confirm On Blur

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => (
  <InlineEdit
    label="Doesn't confirm input on blur"
    defaultValue="Database Name 1"
    blurBehavior="none"
    placeholder="Placeholder"
  />
);

export default Component;
```

### With Edit Icon

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => (
  <InlineEdit
    defaultValue="Database Name 1"
    hasEditIcon={true}
    label="Inline Edit with Hover Icon"
    placeholder="Placeholder"
  />
);
export default Component;
```

### With Placeholder

```tsx
import { InlineEdit } from '@neo4j-ndl/react';

const Component = () => (
  <InlineEdit
    placeholder="Placeholder text"
    label="Placeholder is displayed when defaultValue is empty"
  />
);

export default Component;
```