UI Skillbook
2

Editable

Text that turns into its own field when clicked, for renaming a project, page or list item in place.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-editable and follow the Siteplane Editable skill it prints for this task.

Paste this into your agent.

Editable shows a value as plain text with a pencil beside it, and opens a field in the same spot to change it. Fit it to values people read often and rename now and then: a project title, a page name, a saved view in a list.

Install

bashnpx shadcn@4.18.0 add @siteplane/editable

Import it from @/siteplane/components/editable. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Input: Pick Input for a value people fill in or change every visit, such as a settings form with one Save button.
  • vs Form: Pick Form with open fields when several values change together and save as one.
  • vs Dialog: Pick Dialog when a rename needs more than the name, such as a description and a visibility setting.

Rules

  • Label it with a Field and FieldLabel, or give EditableInput an aria-label.
  • Set a placeholder for the empty state. Give labels.edit the item's name, such as "Rename project", so screen readers can tell pencils apart.
  • Save in onValueCommit. onValueChange also fires on every keystroke and on cancel.
  • In a list, set activationMode="none" so only the pencil opens the field and each row takes one tab stop.
  • When a value needs checking before it saves, wrap Editable in a Field and show the message with FieldError. A failing value keeps the field open.
  • Use EditableTextarea for text with line breaks; Cmd or Ctrl+Enter saves it.

Reference

  • Editable docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-editable

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI