Skip to main content

​
CellSelector

Grid of selectable cells with icons, titles, and optional subtitles. Supports single or multiple selection with visual feedback and hover states.

​
Import

import { CellSelector } from '@adoptaunabuelo/react-components';

​
Props

​
options
Array<OptionProps>
required
Array of selectable cell options
​
type
'single' | 'multiple'
default:"single"
Selection mode: single for radio behavior, multiple for checkboxes
​
selectedOptions
Array<OptionProps>
Currently selected options (controlled component)
​
onChange
(array: Array<OptionProps>) => void
Callback fired when selection changes, receives array of selected options
​
onClick
(item: OptionProps) => void
Callback fired when individual cell is clicked
​
design
'design1' | 'design2'
default:"design1"
Visual design variant
​
style
React.CSSProperties
Custom styles for the container
​
cellStyle
React.CSSProperties
Custom styles applied to each cell

​
OptionProps

​
id
string
required
Unique identifier for the option
​
title
string
required
Main title displayed in the cell
​
subtitle
string
Optional subtitle displayed below the cell
​
icon
React.ReactElement
Icon displayed at the top of the cell
​
disabled
boolean
Disables cell interaction and applies opacity

​
Usage

<CellSelector
  type="multiple"
  options={[
    { id: "1", title: "Option 1", icon: <Icon />, subtitle: "Description" },
    { id: "2", title: "Option 2", icon: <Icon />, disabled: true }
  ]}
  selectedOptions={selected}
  onChange={(items) => setSelected(items)}
/>

​
Notes

  • Cells display with hover effects and scale animation on click
  • Selected cells show primary color border
  • Disabled cells have reduced opacity and no interaction
  • In multiple mode, clicking toggles selection
  • In single mode, only one cell can be selected at a time

Build docs developers (and LLMs) love

Get started for freeTalk to us