Checkbox

Checkbox with a gentle spring bounce and SVG stroke animation on check, with indeterminate state support.

Basic Usage

import { Checkbox } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [checked, setChecked] = useState(false)
  const [subscribed, setSubscribed] = useState(true)

  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Checkbox
        checked={checked}
        onChange={setChecked}
        label="Agree to terms"
      />
      <Checkbox
        checked={subscribed}
        onChange={setSubscribed}
        label="Subscribe to newsletter"
      />
    </div>
  )
}

Indeterminate

<Checkbox indeterminate label="Partial selection" />

Disabled

<Checkbox disabled label="Disabled unchecked" />
<Checkbox checked disabled label="Disabled checked" />

API

Props

Name	Type	Default	Description
checked	boolean	--	Controlled checked state
defaultChecked	boolean	false	Default checked state (uncontrolled)
indeterminate	boolean	false	Indeterminate state
disabled	boolean	false	Disabled
label	string	--	Label text
children	React.ReactNode	--	Custom label content
onChange	(checked: boolean) => void	--	State change handler