MultiSelect

Multi-selection list. Stores an array of selected values under answers.<responseKey>. Same interface as SingleSelect with additional constraints.

Props

Prop	Type	Default	Description
`responseKey`	`string`	—	The response key used to store selected values
`options`	`T[]`	—	Array of option objects
`keyExtractor`	`(item: T, index: number) => string`	—	Extract a unique string value from each option
`renderItem`	`(info: { item: T; index: number; active: boolean }) => ReactNode`	—	Render each option
`min`	`number`	`0`	Minimum number of selections required
`max`	`number`	—	Maximum number of selections allowed (unlimited if omitted)
`clickAnimation`	`'none' \| 'shrink' \| 'grow'`	`'none'`	Tap/click animation style applied to each option
`className`	`string`	—	Container className

Example


<MultiSelect
  options={interests}
  responseKey="interests"
  min={1}
  max={3}
  keyExtractor={(item) => item.id}
  renderItem={({ item, active }) => (
    <div className={active ? 'bg-blue-100 border-blue-500' : 'border-gray-200'}>
      {item.label}
    </div>
  )}
/>