Client component

Editable

Click-to-edit text for titles, names and inline fields where a permanent input would be visual noise. The preview is a real button in the accessibility tree (Enter/Space start editing); the input auto-focuses with its text selected, commits on Enter or blur, and cancels on Escape.

Q3 launch plan

import { Editable } from "astralis-ui";

export function EditableDemo() {
  return (
    <Editable defaultValue="Q3 launch plan" size="lg">
      <Editable.Preview />
      <Editable.Input aria-label="Document title" />
    </Editable>
  );
}

Q3 launch plan

placeholder

size

submitOnBlurstartWithEditViewdisabled

import { Editable } from "astralis-ui";

<Editable
  defaultValue="Q3 launch plan"
>
  <Editable.Preview />
  <Editable.Input aria-label="Document title" />
</Editable>

Import#

import { Editable } from "astralis-ui";

Usage#

Render both parts; whichever matches the current mode shows itself. The preview is a button until you activate it, then the input takes focus with its text selected, so typing replaces the value straight away.

To keep the value in your own state, pass value and onChange. onChange fires on every keystroke, so pair it with onSubmit to know when an edit is final and onCancel to roll back:

Nova Starling

Saved: Nova Starling

"use client";

import { useState } from "react";
import { Editable, Text, VStack } from "astralis-ui";

export function EditableControlled() {
  const [name, setName] = useState("Nova Starling");
  const [saved, setSaved] = useState("Nova Starling");

  return (
    <VStack gap="2" alignItems="start">
      <Editable value={name} onChange={setName} onSubmit={setSaved} onCancel={() => setName(saved)}>
        <Editable.Preview />
        <Editable.Input aria-label="Display name" />
      </Editable>
      <Text size="sm" color="muted">
        Saved: {saved}
      </Text>
    </VStack>
  );
}

Props#

Prop	Type	Default	Description
`value / defaultValue / onChange`	`string / string / (value: string) => void`	`None / "" / None`	Controlled / uncontrolled text. onChange fires on every keystroke while editing.
`onSubmit`	`(value: string) => void`	None	Fires when an edit is committed with Enter or blur.
`onCancel`	`() => void`	None	Fires when an edit is cancelled with Escape.
`placeholder`	`string`	`"Click to edit"`	Shown in the preview while the value is empty.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Text scale shared by the preview and the input.
`submitOnBlur`	`boolean`	`true`	Blur commits the edit. Turn it off and blur cancels instead.
`startWithEditView`	`boolean`	`false`	Mounts already editing.
`disabled`	`boolean`	`false`	Locks editing; the preview becomes plain text.

Parts#

Prop	Type	Default	Description
`Editable.Preview`	`span props`	None	The value at rest. A button in the accessibility tree that starts editing.
`Editable.Input`	`input props`	None	The text field while editing. Focused with its text selected on entry.

Keyboard#

Key	Action
`Enter` / `Space` on the preview	Start editing
`Enter` in the input	Commit the edit
`Esc` in the input	Cancel and restore the previous value
`Tab` out of the input	Commit, or cancel when `submitOnBlur` is off