Skip to content

Multi-select ​

Opt in with multiple. value is an array, and onChange receives (values, items):

tsx
<ActionSheetPicker
  multiple
  items={countries}
  value={codes}
  onChange={setCodes}
  min={1}
  max={3}
  onLimitReached={(limit) =>
    showToast(limit === 'max' ? 'Up to 3 countries' : 'Pick at least one')
  }
  multipleDisplay="chips" // 'labels' (default) · 'count' · 'chips'
/>
Multi-select sheet with checkboxes and Done button
Picks are a draft until Done
Triggers showing selected labels and chips
Labels and chips on the trigger

Confirm modes ​

confirmModeBehaviour
'done' (default)Picks are a draft until Done. Closing without Done discards them.
'instant'Every tap calls onChange.

Trigger display ​

multipleDisplayShows
'labels' (default)"Kenya, Uganda, Tanzania +2"
'count'"5 selected" (from strings.selectedCount)
'chips'A removable chip per value

Clear all in the sheet clears the draft. Chips can be removed straight from the trigger, which respects min.

Released under the MIT License.