EditableText

EditableText defines how EnterUI handles simple inline renaming, including click-to-edit behavior, keyboard commit, and token-driven text sizing.

#Default usage

<EditableText defaultValue="Workspace Alpha" ariaLabel="Edit workspace name" />

#Import

import { EditableText } from "@froggdesign/enter-ui-react";

#Size

Use size="sm", size="md", or size="lg" to match surrounding hierarchy. Keep large sizes for page titles or prominent object names.

#Controlled

Use value, onChange, and onSubmit when the rename action is persisted by the parent. Throw inside onSubmit to keep the control in edit mode.

#Accessibility

EditableText reuses InlineEdit behavior. Enter commits the value, Escape cancels, and the editable field should receive an explicit ariaLabel when no visible label is present.

#API

• value, defaultValue: controlled or uncontrolled text.
• onChange: called after a successful commit.
• onSubmit: optional async submit hook.
• placeholder: empty state text.
• size: sm | md | lg.
• disabled, loading: interaction states.

#Styling

EditableText uses .eui-editable-text on top of InlineEdit classes. Styling stays neutral and inherits text hierarchy from FroggDesign typography tokens.