Input Chips

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

let flavorsList = ['vanilla', 'chocolate', 'strawberry'];

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

let flavorsWhitelist = ['vanilla', 'chocolate', 'strawberry'];

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

function isValidEmail(value: string): boolean {
	return value.includes('@') && value.includes('.');
}

<InputChip ... validation={isValidEmail} />

Additional Settings

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

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

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

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

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

<InputChip ... allowDuplicates />

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

<InputChip ... allowUpperCase />