create a shadcn multiselect field with chips
205d ago
I'll create a multiselect field with chips using shadcn/ui components. This will allow users to select multiple options that appear as removable chips.
This multiselect component:
- Uses shadcn/ui's Command component for the dropdown selection 12
- Implements React Hook Form for form validation and handling 1
- Shows selected items as removable chips/badges
- Supports keyboard navigation and accessibility
- Includes validation (requires at least one selection)
The component allows users to:
- Click on the field to open a dropdown of options
- Search for options using the input field
- Select multiple options that appear as chips
- Remove selections by clicking the X icon on each chip
- Submit the form with validation
You can customize the options array, styling, and validation rules to fit your specific needs.
205d ago
there are no options to choose from
205d ago
You're right, I need to improve the interaction so users can see and select the options. Let me fix that:
I've completely redesigned the multiselect component to make it more user-friendly:
- Added a clear button with a dropdown indicator that shows the available options
- Used shadcn's Popover component to properly display the dropdown
- Improved the selection UI with checkmarks for selected items
- Added a separate area below the dropdown to display all selected items as chips
- Improved accessibility with proper ARIA attributes and screen reader support
Now users can:
- Click the dropdown button to see all available options
- Search for specific frameworks in the dropdown
- Select multiple options with visual feedback
- See selected items as removable chips below the input
- Remove selections by clicking the X on each chip
This implementation follows shadcn/ui's design patterns and provides a much clearer interaction model.
205d ago