Installation
npx shadcn@latest add @iconiq/b-checkbox-groupReducedMotion
Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.
Props
CheckboxGroupOption
6 props
Each option row is described with a plain object and rendered as an animated button.
label
stringRequired
Primary copy shown for the row.
value
stringRequired
Stable identifier used when checking whether the row is selected and when producing the next selection array.
description
stringOptional secondary text rendered below the label.
group
stringOptional section label used to chunk long lists into named groups when adjacent options share the same value.
disabled
booleanDisables the row button and blocks hover, active, and toggle behavior for that option.
disabledReason
stringOptional explainer rendered below disabled rows so users understand why the choice is unavailable.
CheckboxGroup
7 props
Animated multi-select list with optimistic toggle feedback, stable output ordering, and optional disclosure for longer option sets.
options
CheckboxGroupOption[]Required
Array of rows to render, in display order.
value
string[]Default
[]Current selected values. The prop remains the source of truth, while the component renders an immediate optimistic preview after each click.
onChange
(value: string[]) => voidReceives the next selected values array after a row is toggled, normalized back into the original display order.
className
stringMerged onto the root flex column wrapper.
maxVisible
numberOptional progressive-disclosure cap. When provided, the list initially renders up to this many rows and reveals the rest with a built-in toggle.
showMoreLabel
stringOptional label prefix for the disclosure button shown when maxVisible hides rows.
showLessLabel
stringOptional label used when the disclosure button collapses the list back down.
Notes
The component previews the next state immediately after a click, then re-syncs with whatever value the parent sends back.
If a selected option would be hidden by maxVisible, the list stays expanded so users do not lose track of active choices.
This Base UI version keeps checkbox-group semantics and hidden form inputs through the underlying Base UI primitives, while preserving the same visible row motion.
ReducedMotion
1 prop
Shared motion override for the motion-enabled exports documented on this page.
reducedMotion
booleanWhen true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.
Notes
This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.