React Chip Input Component API

Chip Input API

Explore the API reference for the React Chip Input component and all available CChipInput props.

On this page

CChipInput#

import { CChipInput } from '@coreui/react'
// or
import CChipInput from '@coreui/react/src/components/form/CChipInput'

Property	Default	Type
chipClassName#	-	`ChipClassName`
Adds custom classes to chips rendered by the React Chip Input component. Accepts a static className or a resolver function based on chip value.
className#	-	`string`
Adds custom classes to the React Chip Input component root element.
createOnBlur#	`true`	`boolean`
Creates a new chip when the React Chip Input component loses focus with a pending value.
defaultValue#	`[]`	`string[]`
Sets the initial uncontrolled values rendered by the React Chip Input component.
disabled#	-	`boolean`
Disables the React Chip Input component and prevents adding, removing, or selecting chips.
id#	-	`string`
Sets the `id` of the internal text input rendered by the React Chip Input component.
label#	-	`ReactNode`
Renders an inline label inside the React Chip Input component container.
maxChips#	`null`	`number`
Sets the maximum number of chips that can be created in the React Chip Input component.
name#	-	`string`
Sets the name of the hidden input used by the React Chip Input component for form submission.
onAdd#	-	`(value: string) => void`
Callback fired when the React Chip Input component adds a new chip.
onChange#	-	`(values: string[]) => void`
Callback fired when the value list of the React Chip Input component changes.
onInput#	-	`(value: string) => void`
Callback fired when the internal text input value changes in the React Chip Input component.
onRemove#	-	`(value: string) => void`
Callback fired when the React Chip Input component removes a chip.
onSelect#	-	`(selected: string[]) => void`
Callback fired when the selected chip values change in the React Chip Input component.
placeholder#	``	`string`
Sets placeholder text for the internal input of the React Chip Input component.
readOnly#	-	`boolean`
Makes the React Chip Input component readonly while keeping values visible.
removable#	`true`	`boolean`
Displays remove buttons on chips managed by the React Chip Input component.
selectable#	-	`boolean`
Enables chip selection behavior in the React Chip Input component.
separator#	`,`	`string`
Sets the separator character used to create chips while typing or pasting in the React Chip Input component.
size#	-	`'sm'`, `'lg'`
Sets the size of the React Chip Input component to small or large.
value#	-	`string[]`
Controls the values rendered by the React Chip Input component.