`ChipsInput` is a multi-value input component for entering, displaying, and managing a list of chips (tags).

Features:

- Supports controlled and uncontrolled usage - Allows adding, removing, and selecting chips - Can be disabled or allow duplicate values - Customizable chip rendering via `renderChip` prop - Keyboard navigation and accessibility support

Usage:

- Use for tag inputs, multi-select fields, or any scenario where users need to enter multiple discrete values - Combine with custom chip rendering for advanced use cases (e.g., icons, avatars, custom actions)

Best Practices:

- Keep chip content concise and meaningful - Provide clear placeholder text to guide users - Use controlled mode for integration with forms or complex state - Ensure sufficient contrast and accessible focus indicators

Accessibility:

- Fully accessible to screen readers and keyboard users - Remove buttons and chip actions are keyboard accessible - Custom chip renderers should maintain accessibility for all interactive elements

Disabled: Demonstrates a disabled ChipsInput.

- Input and chip actions are not interactive. - Useful for read-only or unavailable states.

Controlled: Demonstrates controlled usage of ChipsInput.

- Value and onChange are managed by the parent component. - Useful for form integration and advanced state management.

Empty: Shows ChipsInput with no initial chips.

- Useful for scenarios where the user starts with an empty list.

AllowDuplicates: Demonstrates ChipsInput with duplicate values allowed.

- Useful for cases where repeated tags are meaningful.

CustomRenderChip: Demonstrates custom chip rendering using the renderChip prop.

- Chips can display custom icons, styles, and remove buttons. - Useful for advanced UI requirements or branding.