CSS: in-place-edit
.instui-in-place-edit — A [contenteditable] that reads as text until focused, then shows input chrome.
The input chrome only appears while focused; -readonly suppresses both the hover and focus affordances so the element always reads as plain inline text.
Source: in-place-edit.css
TIP
JS Enhancement — This component's CSS renders and works on its own; pair it with @pantoken/interactions to add the interactive behavior. See the modifier table below.
Accessibility
Give the editable element role="textbox" and an accessible name (aria-label).
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/in-place-edit.css";Demo
Examples
html
<span class="instui-in-place-edit" contenteditable="true" role="textbox" aria-label="Project name">Untitled</span>Modifiers
| Modifier | Description |
|---|---|
.-readonly | Shown inline but not editable (no hover/focus affordance). |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-background-muted | <color> | LightDarklight-dark(#F2F4F5, #273540) |
--instui-color-text-base | <color> | LightDarklight-dark(#273540, #F2F4F5) |
--instui-component-text-input-background-color | <color> | LightDarklight-dark(#ffffff, #171B21) |
--instui-component-text-input-border-color | <color> | LightDarklight-dark(#7E8792, #5F6E7A) |
--instui-component-text-input-border-radius | <length> | 0.75rem |
--instui-component-text-input-border-width | <length> | 0.0625rem |
--instui-focus-outline-color | auto | <color> | — |
--instui-focus-outline-offset | <length> | — |
--instui-focus-outline-style | auto | <outline-line-style> | — |
--instui-focus-outline-width | <line-width> | — |
--instui-spacing-space-xs | <length> | 0.25rem |
--instui-spacing-space2xs | <length> | 0.125rem |
Related
- text-input — On focus it shows the same input chrome as a text input.