@coreui/react
Version:
UI Components Library for React.js
93 lines (92 loc) • 3.24 kB
TypeScript
import React, { HTMLAttributes, ReactNode } from 'react';
type ChipClassName = string | ((value: string) => string);
export interface CChipInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput' | 'onSelect'> {
/**
* Adds custom classes to the React Chip Input component root element.
*/
className?: string;
/**
* Adds custom classes to chips rendered by the React Chip Input component. Accepts a static className or a resolver function based on chip value.
*/
chipClassName?: ChipClassName;
/**
* Creates a new chip when the React Chip Input component loses focus with a pending value.
*/
createOnBlur?: boolean;
/**
* Sets the initial uncontrolled values rendered by the React Chip Input component.
*/
defaultValue?: string[];
/**
* Disables the React Chip Input component and prevents adding, removing, or selecting chips.
*/
disabled?: boolean;
/**
* Sets the `id` of the internal text input rendered by the React Chip Input component.
*/
id?: string;
/**
* Renders an inline label inside the React Chip Input component container.
*/
label?: ReactNode;
/**
* Sets the maximum number of chips that can be created in the React Chip Input component.
*/
maxChips?: number | null;
/**
* Sets the name of the hidden input used by the React Chip Input component for form submission.
*/
name?: string;
/**
* Callback fired when the React Chip Input component adds a new chip.
*/
onAdd?: (value: string) => void;
/**
* Callback fired when the value list of the React Chip Input component changes.
*/
onChange?: (values: string[]) => void;
/**
* Callback fired when the internal text input value changes in the React Chip Input component.
*/
onInput?: (value: string) => void;
/**
* Callback fired when the React Chip Input component removes a chip.
*/
onRemove?: (value: string) => void;
/**
* Callback fired when the selected chip values change in the React Chip Input component.
*/
onSelect?: (selected: string[]) => void;
/**
* Sets placeholder text for the internal input of the React Chip Input component.
*/
placeholder?: string;
/**
* Makes the React Chip Input component readonly while keeping values visible.
*/
readOnly?: boolean;
/**
* Displays remove buttons on chips managed by the React Chip Input component.
*/
removable?: boolean;
/**
* Enables chip selection behavior in the React Chip Input component.
*/
selectable?: boolean;
/**
* Sets the separator character used to create chips while typing or pasting in the React Chip Input component.
*/
separator?: string | null;
/**
* Sets the size of the React Chip Input component to small or large.
*/
size?: 'sm' | 'lg';
/**
* Controls the values rendered by the React Chip Input component.
*
* @controllable onChange
*/
value?: string[];
}
export declare const CChipInput: React.ForwardRefExoticComponent<CChipInputProps & React.RefAttributes<HTMLDivElement>>;
export {};