Skip to component content
Input051 / 155

RenameButton

Edit a name inline and commit it explicitly.

Example

Untitled workspace

Enter saves · Esc cancels · “Archived” shows validation.

Source
RenameButton.tsxtsx
import { useState } from "react";
import { RenameButton, Text, VStack } from "@/ohmygui";

export default function Example() {
  const [name, setName] = useState("Untitled workspace");
  return (
    <VStack gap="md" align="start">
      <Text as="p" role="status">
        {name}
      </Text>
      <RenameButton
        value={name}
        onCommit={async (next) => {
          await new Promise((resolve) => setTimeout(resolve, 300));
          if (next.toLowerCase() === "archived")
            throw new Error("Example reserved name");
          setName(next);
        }}
      />
      <Text as="p" color="muted">
        Enter saves · Esc cancels · “Archived” shows validation.
      </Text>
    </VStack>
  );
}