Inplace

Click, edit, done.

<sui-inplace>MiscStable

About

Click-to-edit text. The value shows with a pencil mark; a click swaps in an input, Enter or blur saves, and Escape reverts to the last saved value. Both states take the host's font and share one box, so a title can be an inplace and nothing moves when editing starts. Use to rename in place: memos, report titles, account names.

Usage

<sui-inplace label="Memo" value="Fall supplies order. Deliver to dock."></sui-inplace> <script type="module"> import { defineCustomElements } from "@shineui/core/loader"; import "@shineui/core/shineui.css"; defineCustomElements(); const el = document.querySelector("sui-inplace"); el.addEventListener("suiClose", (e) => console.log(e.detail)); </script>

import { SuiInplace } from "@shineui/react"; import "@shineui/core/shineui.css"; export function Example() { return <SuiInplace label="Memo" value="Fall supplies order. Deliver to dock." onSuiClose={(e) => console.log(e.detail)} />; }

import { Component } from "@angular/core"; import { SuiInplace } from "@shineui/angular"; @Component({ standalone: true, imports: [SuiInplace], template: `<sui-inplace label="Memo" value="Fall supplies order. Deliver to dock." (suiClose)="onChange($event)"></sui-inplace>`, }) export class Example { onChange(e: CustomEvent) { console.log(e.detail); } }

Basic

The closed text is role="button" and focusable. The input takes its accessible name from label, or from placeholder when there is no label.

<sui-inplace label="Memo" value="Fall supplies order. Deliver to dock."></sui-inplace>

Label and placeholder

placeholder shows in the faint tone while the value is empty, and it is what an empty field offers as its name. The label is the uppercase micro-label above the text.

The host sets the type

The text and the field take the font of the host: size, weight, line height and family. A record title can be an inplace at the page title size, and both states share one box, so the page does not move when editing starts. With nothing set, the element is the body size, 13.5px.

Due

Opening from outside

editing is mutable and reflected, so a row menu can open the editor and a save can close every open one. A parent writing editing emits nothing, because it already knows.

// setup(root): properties and events setup(root) { const el = root.querySelector('#ip-remote'); root.querySelector('#ip-rename').addEventListener('click', () => (el.editing = true)); root.querySelector('#ip-done').addEventListener('click', () => (el.editing = false)); }

In a form

The element is not form-associated. name goes on whichever native input is mounted, the text field while editing and a hidden one while closed, so the value posts once in both states.

<form id="ip-form" style="display:grid;gap:14px;max-width:340px"> <sui-inplace label="Memo" name="memo" value="Split freight across two invoices."></sui-inplace> <sui-inplace label="Reference" name="reference" placeholder="Add a reference"></sui-inplace> <div style="display:flex;gap:8px"> <sui-button type="submit" variant="brand" label="Save bill"></sui-button> </div> <output id="ip-out" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Submit to see what posts.</output> </form>

// setup(root): properties and events setup(root) { const form = root.querySelector('#ip-form'); const out = root.querySelector('#ip-out'); form.addEventListener('submit', (e) => { e.preventDefault(); out.textContent = [...new FormData(form)].map(([k, v]) => `${k}=${v || '(empty)'}`).join(' '); }); }

Events

suiOpen fires after the element enters edit mode itself and suiInput fires on every keystroke. suiClose fires before it leaves edit mode, with detail "pick" for a commit or "escape" for an abandoned edit, and suiSave follows an accepted commit with the stored value.

Idle.

// setup(root): properties and events setup(root) { const el = root.querySelector('#ip-events'); const log = root.querySelector('#ip-log'); el.addEventListener('suiOpen', () => { log.textContent = 'Editing.'; }); el.addEventListener('suiInput', (e) => { log.textContent = `Typing: ${e.detail || '(empty)'}`; }); el.addEventListener('suiClose', (e) => { log.textContent = `Leaving edit mode (${e.detail}).`; }); el.addEventListener('suiSave', (e) => { log.textContent = `Saved ${e.detail}.`; }); }

Disabled and read-only

disabled locks the text: no button role, no tab stop, no pencil, and a hidden control still posts its value, as a title the current user may not rename. readonly keeps the text focusable with its name and marks it aria-readonly, but opens nothing, for a record the user may see and not change.

Holding a failed edit open

preventDefault on suiClose keeps the editor open and refocuses the input, which is how a failed validation stays on screen. Only the commit is vetoed here, so Escape still reverts and lets the user out.

Clear the text, then press Enter.

<div style="display:flex;flex-direction:column;gap:14px;align-items:flex-start"> <sui-inplace id="ip-veto" label="Account name" value="1010 Operating cash"></sui-inplace> <span id="ip-veto-log" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Clear the text, then press Enter.</span> </div>

// setup(root): properties and events setup(root) { const el = root.querySelector('#ip-veto'); const log = root.querySelector('#ip-veto-log'); el.addEventListener('suiClose', (e) => { if (e.detail !== 'pick' || el.value.trim()) { log.textContent = 'Accepted.'; return; } e.preventDefault(); log.textContent = 'An account needs a name. The editor stays open.'; }); }

Keyboard

Key	Action
`Enter` `Space`	On the closed text: opens the editor and focuses the input with the text selected.
`Enter`	In the input: commits the edit and returns focus to the text.
`Escape`	In the input: reverts to the last saved value and returns focus to the text.
`Tab`	Moves focus on. The blur commits the edit, and focus stays where the user sent it.

API

`<sui-inplace>`

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Locks the text: no button role, no tab stop, no pencil, and a click, Enter or Space opens nothing. Reflected. A closed editor stays closed and a hidden control still posts the value, as `disabled` on a form control would not; a title the current user may not rename is the case.
`editing`	`editing`	`boolean`	`false`	Whether the editor is open. Mutable and reflected, so a parent can open the editor from its own control (a row menu's Rename) and close every open one when the record saves. A parent writing it emits nothing. An initial `editing` renders the input without stealing focus on mount.
`label`	`label`	`string`string \| undefined		Uppercase micro-label above the text. It is the input's accessible name.
`name`	`name`	`string`string \| undefined		Form control name, reflected. The element is not form-associated: the name goes on whichever native input is mounted, the text field while editing and a hidden one while closed, so the value posts once in both states.
`placeholder`	`placeholder`	`string`string \| undefined		Shown in the faint tone while the value is empty. It also names the input when there is no `label`.
`readOnly`	`readonly`	`boolean`	`false`	Keeps the text readable and focusable with its name, but opens nothing: the pencil goes and the text is `aria-readonly`. For a record the user may see but not change. Reflected, on the native `readonly` spelling.
`value`	`value`	`string`	`''`	Current text (the reference `defaultValue`). Mutable: updated on every keystroke and on save.

Events

Event	Detail	React	Vue	Description
`suiClose`	`SuiCloseReason`"cancel" \| "close-button" \| "escape" \| "outside" \| "pick" \| "scrim" \| "trigger"	`onSuiClose`	`@sui-close`	Fires before the element leaves edit mode itself; detail is `'pick'` for a commit and `'escape'` for an abandoned edit. Cancelable: `preventDefault()` keeps the editor open and refocuses it, which is how a parent holds a failed validation on screen. It does not bubble.
`suiInput`	`string`	`onSuiInput`	`@sui-input`	Fires on every keystroke while editing; detail is the live value.
`suiOpen`	`void`	`onSuiOpen`	`@sui-open`	Fires after the element enters edit mode itself (a click, Enter or Space, or `edit()`). It does not bubble, as no open-state event does.
`suiSave`	`string`	`onSuiSave`	`@sui-save`	Fires when an edit commits (Enter or blur); detail is the saved value. Emitted after the matching `suiClose('pick')` is accepted.

Methods

Method	Signature	Description
`edit()`	`edit() => Promise<void>`	Enters edit mode as a click would: focuses the input and emits `suiOpen`, so a row menu's Rename behaves like the person clicked the text. Writing `editing` opens the editor silently, for a parent that keeps the state itself.
`setFocus()`	`setFocus() => Promise<void>`	Moves keyboard focus to the text, or to the input while editing, without opening the editor.

Types

`SuiCloseReason` typeWhy a dismissible surface is closing. Detail of the cancelable `suiClose`. A consumer expresses "a stray backdrop click must not close this" by calling `preventDefault()` on the reason it does not accept, which is why none of these needs a prop of its own.
No members.

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.