Inline edit title

Lets a heading be renamed in place, without opening a form.

Live React portWildInlineEditTitle.vueForms/InlineEditTitle

Try it

Click the name and type. Enter finishes, Escape puts the old name back.

Size

Hide icon on focus

Empty

<WildInlineEditTitle
  v-model="alarm.name"
  size="md"
  placeholder="Untitled alarm"
  @submit="save"
/>

Use it for the name of the thing a dialog or screen edits, such as an alarm’s name in its dialog header.
Save on @submit or with the screen’s own Save button. The bound name changes on every keystroke, so don’t save on each change.

Don’t use it

For a field among other fields. Use Text input.
For a name that needs a label, hint or error message. Use a text input inside a Form field.

Match the heading it replaces. The default is md.

sm · 14px / 600

md · 16px / 600

lg · 18px / 700

<WildInlineEditTitle v-model="name" size="sm" />
<WildInlineEditTitle v-model="name" size="md" />
<WildInlineEditTitle v-model="name" size="lg" />

It reads as a heading until it’s touched. Hover lays a grey ground, and focus draws the field’s blue edge.

rest

hover

focus

empty

The frame is always there, clear at rest, so the name never moves when it takes focus.

Make the placeholder name the thing being named: Untitled alarm.
Keep names to one line. A longer name ends in an ellipsis at rest and scrolls while it’s edited.
Set maxLength when the name has a limit, so typing stops there.

A title has no visible label, so give it aria-label. Without one, screen readers fall back to the placeholder.

Key	What it does
Tab	Moves focus into the name.
Enter	Leaves the field and submits the name.
Escape	Restores the name from before editing and leaves the field. A dialog around it stays open.

Prop	Type	Default	Description
modelValue	string	—	The name (v-model).
placeholder	string	'Untitled'	Shown when the name is empty.
size	'sm' \| 'md' \| 'lg'	'md'	Type size: 14, 16 or 18px.
icon	string	'pencil-solid'	Leading icon name.
hideIconOnFocus	boolean	true	Fades the icon out while editing.
maxLength	number	—	Maximum characters.
aria-label	string	—	Accessible name. Falls back to the placeholder.
@submit	() => void	—	Enter pressed. The field has already blurred.
@cancel	() => void	—	Escape pressed. The name is already restored.
@blur	(e: FocusEvent) => void	—	Focus left the field. Saves nothing.

Token	Value	Where it lands
--global-neutral-grey-1100	#2D2B32	The name.
--global-neutral-grey-1000	#4F4D55	Placeholder, at weight 400.
--global-neutral-grey-900	#7F7D83	The pencil.
--global-neutral-grey-200	#F5F5F5	Hover ground.
--global-base-white	#FFFFFF	Focus ground.
--global-blue-1000	#1877F2	Focus edge, halo and caret.
--global-blue-300	#BDEDFF	Selected text.
--radius-lg	8px	Hover and focus frame corners.