Skip to main content

​
Checkbox

Checkbox component with animated checkmark, label support, and optional avatar display.

​
Import

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

​
Props

​
selected
boolean
required
Whether the checkbox is checked
​
label
string
Label text displayed next to checkbox
​
sublabel
string
Secondary label text displayed below main label
​
error
boolean
Shows error state with red coloring
​
height
number
Custom height in pixels for the checkbox box
​
width
number
Custom width in pixels for the checkbox box
​
position
'left' | 'right'
default:"left"
Position of checkbox relative to label
​
avatarEnabled
boolean
Shows avatar with first letter of label
​
shape
'circle' | 'square'
default:"square"
Shape of the checkbox box
​
onClick
(event: React.MouseEvent<HTMLButtonElement>) => void
Callback fired when checkbox is clicked
​
children
React.ReactNode
Custom content to display instead of label

​
Usage

<Checkbox
  selected={isChecked}
  label="Accept terms and conditions"
  onClick={() => setIsChecked(!isChecked)}
/>

​
Notes

  • Uses Lottie animation for checkmark appearance
  • Supports both controlled and uncontrolled modes
  • Error state changes colors to red variants
  • Avatar displays first letter of label in uppercase
  • Hover effect changes background color
  • Active state includes scale-down animation

Build docs developers (and LLMs) love

Get started for freeTalk to us