CSS: in-place-edit
.instui-in-place-edit — A [contenteditable] that reads as text until focused, then shows input chrome.
Source: in-place-edit.css
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>Untitled
Modifiers
| Modifier | Description |
|---|---|
.-readonly | Shown inline but not editable (no hover/focus affordance). |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-background-muted | <color> | light-dark(#F2F4F5, #273540)LightDark |
--instui-color-text-base | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-component-text-input-background-color | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-text-input-border-color | <color> | light-dark(#7E8792, #5F6E7A)LightDark |
--instui-component-text-input-border-radius | <length> | 0.75rem |
--instui-component-text-input-border-width | <length> | 0.0625rem |
--instui-focus-outline-color | <color> | invert | — |
--instui-focus-outline-offset | <length> | — |
--instui-focus-outline-style | auto | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | — |
--instui-focus-outline-width | <length> | — |
--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.