Checkbox Grid Layout

A grid of checkboxes arranged in multiple columns instead of a vertical list for efficient space usage

Organize multiple checkboxes in a responsive grid layout. Ideal for showing 6+ options in a compact, scannable format that adapts to screen size.

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-checkbox-grid.json

npx shadcn@latest add https://www.shadcn.io/r/form-checkbox-grid.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-checkbox-grid.json

bunx shadcn@latest add https://www.shadcn.io/r/form-checkbox-grid.json

Multiple checkbox selection group

Terms acceptance checkbox form

Parent-child checkbox with select all

Checkbox list with bulk actions

Basic single-selection radio group

Multi-select with checkbox popover

Last updated on March 24, 2026

Was this page helpful?

Cascading Select Form

A form with two dependent select dropdowns where the second select's options change based on the first selection

Checkbox Group Form

A checkbox group form with multiple options demonstrating array field validation