Chips

Assist chip

Disabled

Filter chip

Disabled

Remove was clicked

Input chip

Disabled

Chips with text fields

Emails
<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>