Data
Inline Edit
semantic HTML읽기 상태를 현재 위치에서 편집 상태로 전환합니다.
Live example
Project name: Apollo
<p data-standard-component="inline-edit">Project name: <span data-inline-value>Apollo</span> <input value="Apollo" hidden data-inline-input> <button type="button" data-inline-edit>Edit</button><button type="button" hidden data-inline-save>Save</button><button type="button" hidden data-inline-cancel>Cancel</button></p>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.3 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
Enter로 저장하고 Escape로 취소하며 작업 후 Edit 버튼으로 포커스를 복귀시킵니다. required 오류는 입력에 유지됩니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->