Your workspace is ready.
Forms
Chat Composer
semantic HTML메시지 입력과 제출·busy 상태를 제공하며 전송 정책은 애플리케이션에 위임합니다.
Live example
<section class="static-editor chat-editor" data-static-input="chat"><div class="chat-messages" data-chat-messages><article><strong>System</strong><p>Your workspace is ready.</p></article></div><form data-chat-form><label for="chat-message">Message</label><textarea id="chat-message" rows="3" maxlength="500" placeholder="Write a message" data-chat-input></textarea><div class="chat-composer-actions"><small><span data-chat-count>0</span>/500</small><button type="submit" data-composer-send>Send</button></div></form><output class="editor-status" data-example-output aria-live="polite">Ready</output></section>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.7 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
labelled native input, keyboard submit and preserved value
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->