Input Chips

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 items within this list can be entered. Invalid or duplicate values will show an error state.

Custom Validation

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

Invalid Hook

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

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.

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