Input Chips

Create an array of values, then bind these to your the InputChip component. As values are added or removed the array will update.

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

<InputChip label="Flavors" placeholder="Add flavor..." bind:value={flavors} />

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

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

<InputChip ... allowDuplicates={true} />

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

<InputChip ... allowUpperCase={true} />

Required Attribute

Note the required attribute has no bearing on the validation state of this input. Instead, we recommend disabling form submission if your validation conditions are not for our your source value array - such as too few or too many values. Make sure to inform users of the error state using a message or Alert.

<button type="submit" disabled={!flavors.length}>Submit</button>

<button type="submit" disabled={flavors.length > 3}>Submit</button>