Svelte Component

Input Chips

Allows input of multiple values.

typescript
import { InputChip } from '@skeletonlabs/skeleton';
Source Page Source Transitions

Demo

foo, bar, fizz, buzz

Bind an array of data to the component value property. Only string values are supported at this time.

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.

vanilla, chocolate, strawberry

Custom Validation

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

john@email.com, jane@email.com, sally@email.com

Invalid Hook

You may utilize an onInvalid function that executes when the input becomes invalid.

rock, r&b, pop

Add / Remove Chips

To add or remove chips programatically, use the exported functions addChip and removeChip after binding the ChipInput.

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 →