Skip to content
MIZU.

InlineEdit

Change a value in place, with validation and an explicit path back.

Live — this one is real

Usage

import { useState } from "react";
import { InlineEdit } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState("Untitled release");
  return (
    <InlineEdit
      label="Release name"
      value={value}
      onValueChange={setValue}
      validate={(v) => (v.trim() ? undefined : "A release needs a name.")}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect interaction/InlineEdit.tsx

Source is included in the npm package under src/interaction/InlineEdit.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
label / value / onValueChangestring / string / function—Name and committed value.
validate(value: string) => string | undefined—Return an error message to keep the draft open.

Accessibility

Editing focuses a labelled input. Enter saves, Escape/Cancel discards; focus returns to the trigger. Validation errors are linked and announced. Blur never silently commits.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

ComboboxMultiSelectRangeSelectorReorderList