Chip Input
Email/tag input with add/remove chips. Used for attendee lists, tag inputs, and multi-value text fields.
When to Use
Use Chip Input when:
Collecting multiple email addresses, tags, or keywords. The chip pattern shows each value as a removable token.
Don't use when:
A simple text input or select dropdown would suffice. For single-value inputs use Input.
Default
<?= ws_chip_input('attendees', [
'label' => 'Attendees',
'placeholder' => 'Enter email address',
'type' => 'email',
'addIcon' => 'person_add',
'addText' => 'Add',
]) ?>Tag Input (no label)
<?= ws_chip_input('tags', [
'placeholder' => 'Add tag...',
'addIcon' => 'add',
]) ?>Chip Markup (JS-rendered)
Chips are rendered into the __list container by JavaScript. Use this HTML structure:
alice@example.com
bob@example.com
<div class="ws-chip">
<span>alice@example.com</span>
<button class="ws-chip__remove" type="button">
<span class="material-symbols-outlined">close</span>
</button>
</div>API
| Param | Type | Default | Description |
|---|---|---|---|
$name | string | — | Field name / ID prefix (required) |
label | string | null | Label text |
placeholder | string | "Add item..." | Input placeholder |
type | string | text | Input type: email|text |
addIcon | string | add | Icon for add button |
addText | string | null | Text for add button |
id | string | $name | Element ID |
class | string | "" | Additional CSS classes |