Accordion Multiselect
Open in
Default (With Checkbox)

Controlled (No Checkbox)

Selected IDs: srv_mani_french

Features

  • Fully composable architecture using sub-components
  • Built on top of Radix UI primitives (Accordion, Checkbox)
  • Supports both controlled and uncontrolled selection states
  • Agnostic content model - render any React Node as an option
  • Optional checkbox display
  • Accessible keyboard navigation and focus management
  • Styling with Tailwind CSS and data-attributes

Component Props

AccordionMultiselect

  • value - string[] - Controlled selected values
  • defaultValue - string[] - Default selected values for uncontrolled mode
  • onValueChange - (value: string[]) => void - Callback when selection changes

AccordionMultiselectOption

  • value - string - The unique identifier for this option (used in selection)
  • showCheckbox - boolean - Whether to show the checkbox (default: false)
  • children - ReactNode - The content to display