Input Chips

Svelte Component

Allows input of multiple values.

Examples

foo
bar
fizz
buzz
foo,bar,fizz,buzz
vanilla,chocolate,strawberry
john@email.com,jane@email.com,sally@email.com

Getting Started

Bind an array of data to the component value property. Please note that only string values are supported.

typescript
let flavorsList = ['vanilla', 'chocolate', 'strawberry'];
html
<InputChip name="chips" bind:value={flavorsList} />

Whitelist Values

You can provide an array of strings to use as a whitelist. Only whitelisted items can be entered. Invalid or duplicate values will show an error state.

typescript
let flavorsWhitelist = ['vanilla', 'chocolate', 'strawberry'];
html
<InputChip ... whitelist={flavorsWhitelist} />

Custom Validation

You can optionally provide a function to provide custom validation. Make sure to accept a string value and return a boolean.

typescript
function isValidEmail(value: string): boolean {
	return value.includes('@') && value.includes('.');
}
html
<InputChip ... validation={isValidEmail} />

Additional Settings

Use the max property to define a maximum number of chips allowed.

html
<InputChip ... max={3} />

Use the minlength and maxlength properties to set the minimum/maximum number of input characters respectively.

html
<InputChip ... minlength={2} maxlength={5} />

By default, only a single instance of each value is allowed. If you wish to allow duplicates, set allowDuplicates.

html
<InputChip ... allowDuplicates />

By default, all values are trimmed and formatted lowercase. If you wish to allow uppercase, set allowUpperCase.

html
<InputChip ... allowUpperCase />

See Also

Interactive chip element styles for actions, selection, or filtering.

Chip Elements →