Checkbox

`

`

`

• Supports indeterminate state.
• Accessible, easy to compose and customize.
• Sizable & works controlled or uncontrolled.
• Ability to opt-out to native checkbox on web.

Installation

Checkbox is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/checkbox

Checkbox is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/checkbox

To use the headless checkbox, you want to import it from the @hanzogui/checkbox-headless package. This package has no dependency on @hanzogui/core, but still works off the react-native APIs. This means you can bring your own style library.

npm install @hanzogui/checkbox-headless

Usage

import { Check } from '@hanzogui/lucide-icons-2'
import { Checkbox } from '@hanzo/gui'

export default () => (
  <Checkbox size="$4">
    <Checkbox.Indicator>
      <Check />
    </Checkbox.Indicator>
  </Checkbox>
)

Use the createCheckbox export to create a fully custom checkbox that still uses the Hanzo GUI styling system. This is similar to setting unstyled, but goes a bit further. It doesn't add any types for size or unstyled, and it won't automatically apply the active theme. It does pass the checked prop down as indicated in the types of createCheckbox.

The useCheckbox hook provides all the state and accessibility props needed to build a custom checkbox with any styling solution.

Basic Usage

import { useCheckbox } from '@hanzogui/checkbox-headless'
import { useState } from 'react'
import { Pressable, View } from 'react-native'

function MyCheckbox({ defaultChecked, onCheckedChange, ...props }) {
  const [checked, setChecked] = useState(defaultChecked || false)

  const { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(
    props,
    [checked, setChecked],
    null
  )

  return (
    <>
      <Pressable
        ref={checkboxRef}
        {...checkboxProps}
        style={{
          width: 24,
          height: 24,
          borderRadius: 4,
          borderWidth: 2,
          borderColor: checked ? '#3b82f6' : '#d1d5db',
          backgroundColor: checked ? '#3b82f6' : 'transparent',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        {checked && <View style={{ width: 12, height: 12, backgroundColor: 'white' }} />}
      </Pressable>
      {bubbleInput}
    </>
  )
}

API Reference

Checkbox

Checkbox extends ThemeableStack inheriting all the props, plus:

Checkbox.Indicator

Checkbox.Indicator extends ThemeableStack inheriting all the props, plus:

useCheckbox

The useCheckbox hook accepts three arguments:

const { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(
  props, // CheckboxProps
  state, // [checked: CheckedState, setChecked: (checked: CheckedState) => void]
  ref // React.Ref
)

CheckedState

The checkbox supports three states:

• true - checked
• false - unchecked
• 'indeterminate' - indeterminate/mixed state (useful for "select all" patterns)

Props (first argument)

State (second argument)

A tuple of [checked, setChecked] where:

• checked: Current state (boolean | 'indeterminate')
• setChecked: React state setter function

Return Value