Forms
Form Field
semantic HTML레이블, 도움말, 오류 메시지를 입력과 연결합니다.
Live example
<div data-standard-component="form-field" label="Work email" hint="We will only use this for account notices.">
<input type="email" value="[email protected]">
</div>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.2 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
label은 slotted control의 accessible name으로 적용되고 error가 있을 때 aria-invalid와 alert 메시지가 함께 제공됩니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->