Welcome. What would you like to build?
Data
Chat Message
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 article, readable author and time metadata
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->