Chips
Assist chip
Disabled
Filter chip
Disabled
Input chip
Input chip
Input chip
Disabled
Input chip
Input chip
Chips with text fields
Emails
Copy Code
<TextField
type="email"
label="Emails"
variant="outlined"
placeholder="Add email..."
style="width:340px"
bind:value={email}
bind:reportValidity={reportEmailValidity}
populated={emails.length > 0}
onkeydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault()
if (e.currentTarget.value && reportEmailValidity?.()) {
emails.push(e.currentTarget.value)
email = ''
}
}
}}
onblur={(e) => {
if (e.currentTarget.value && reportEmailValidity?.()) {
emails.push(e.currentTarget.value)
email = ''
}
}}
>
<ChipSet>
{#each emails as email, index (index)}
<InputChip
name="email"
value={email}
onremove={() => {
if (index > -1) {
emails.splice(index, 1)
}
}}
/>
{/each}
</ChipSet>
</TextField>