Editable

activationMode controls how editing starts. submitMode controls how the value is committed.

import { Editable } from '@manti-ui/react';

export default function EditableBasic() {
  return (
    <Editable
      label="Recipe name"
      variant="primary"
      defaultValue="Kayseri mantısı"
      placeholder="Enter a name…"
      activationMode="focus"
      submitMode="both"
    />
  );
}

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional field label.
`variant`	`MantiVariant`	`'primary'`	Focus-ring variant.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	—	Called whenever the value changes.
`onValueCommit`	`(value: string) => void`	—	Called when the value is committed (Enter/blur/submit).
`activationMode`	`'focus' \| 'dblclick' \| 'click' \| 'none'`	—	What enters edit mode.
`submitMode`	`'enter' \| 'blur' \| 'both' \| 'none'`	—	What commits the value.
`placeholder`	`string`	—	Placeholder shown when empty.
`disabled`	`boolean`	—	Disable editing.
`readOnly`	`boolean`	—	Make the field read-only.
`required`	`boolean`	—	Mark the field as required.
`invalid`	`boolean`	—	Mark the field as invalid.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="editable"][data-part="root"]`	The field wrapper; carries data-variant.
`label`	`[data-scope="editable"][data-part="label"]`	The field label.
`area`	`[data-scope="editable"][data-part="area"]`	Wraps the preview and the input.
`preview`	`[data-scope="editable"][data-part="preview"]`	The static text shown when not editing.
`input`	`[data-scope="editable"][data-part="input"]`	The text input shown in edit mode.
`control`	`[data-scope="editable"][data-part="control"]`	Wraps the edit/save/cancel buttons.
`edit-trigger`	`[data-scope="editable"][data-part="edit-trigger"]`	Enters edit mode.
`submit-trigger`	`[data-scope="editable"][data-part="submit-trigger"]`	Commits the value.
`cancel-trigger`	`[data-scope="editable"][data-part="cancel-trigger"]`	Discards the edit.

Tokens

Token	Controls
`--manti-editable-height`	height

Last updated 13 September 2026