Forms
Chips Input
semantic HTML여러 입력값을 칩 목록으로 관리합니다.
Live example
Press Enter to add a tag. Select a tag to remove it.
<section class="static-editor token-editor" data-static-input="chips"><label for="chips-value">Tags</label><div class="token-input"><div class="token-list" data-chip-list><button type="button" class="input-chip" data-chip data-chip-value="standard">standard <span aria-hidden="true">×</span></button><button type="button" class="input-chip" data-chip data-chip-value="html">html <span aria-hidden="true">×</span></button></div><input id="chips-value" type="text" placeholder="Type and press Enter" data-chip-input aria-describedby="chips-help"></div><small id="chips-help">Press Enter to add a tag. Select a tag to remove it.</small></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.3 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
각 값은 제거 가능한 이름을 가지며 키보드로 추가·삭제할 수 있습니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->