InlineEdit

Reads as plain text until focused. Enter commits, Escape restores the previous value, and nothing is saved on blur by accident.

import { useState } from 'react';
import { InlineEdit } from '@andrewbehma/glass-ui';

Playground

InlineEdit.tsx

import { useState } from 'react';
import { InlineEdit } from '@andrewbehma/glass-ui';

function Example() {
  const [title, setTitle] = useState("Quarterly planning");
  return (
    <div className="grid w-full max-w-72 gap-1">
      <InlineEdit aria-label="Board title" value={title} onCommit={setTitle} />
      <p className="text-label text-ink-3">Saved: {title}</p>
    </div>
  );
}