InputChips

Interface of InputChips
🏗 Coming Soon

The InputChips component takes an array of strings (values) and renders them each as a deletable Chip inside a text box. The input value is converted to chip values as the user types via the comma or enter keys, or on blur. The values and onChange props are required – InputChips is a controlled component.

InputChips also supports summary and hideControls, similar to InputSearch and autoResize, similar to InputText.

mangokiwi
You've entered 2 items

Controlled Input Value

The inputValue and onInputChange props allow control of the typed value. We also provide an optional onClear event hook that can be used for post-event cleanup or rendering helpful undo functionality.

Validation

If a duplicate value is entered, it will not be added to the values list. The optional validate prop is a function returning a boolean that is called for each value that is entered. If it returns false, the value is not added. onValidationFail and onDuplicate are optional handlers for when invalid and duplicate values are entered.

removeOnBackspace

The removeOnBackspace prop defaults to true. When set to false, hitting the Backspace key while focused in the input will not remove values.

mangokiwi