Welcome. What would you like to build?
Layout
Chat
semantic HTML대화 제목, 메시지 영역과 입력 영역을 조합하는 범용 채팅 컨테이너입니다.
Live example
<section data-ui="chat" data-standard-component="chat"><header class="example-chat-title"><span class="example-chat-avatar" aria-hidden="true">G</span><span><strong>Chois support</strong><small>Design workspace - online</small></span></header><div class="chat-messages" data-chat-messages><article data-role="assistant"><strong>Grace</strong><p>Welcome. What would you like to build?</p></article><article data-role="user"><strong>You</strong><p>A lightweight chat surface with room for longer answers.</p></article><article data-role="system"><strong>System</strong><p>Conversation saved to this browser.</p></article></div><form data-chat-form><label>Message<textarea rows="3" placeholder="Write a message" data-chat-input></textarea></label><div class="chat-composer-actions"><small><span data-chat-count>0</span>/500</small><button type="submit">Send</button></div></form></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
named region, light-DOM messages and live status
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->