Examples

Basic Usage

<CheckBox
  isChecked={isChecked}
  checkColor="#eef3ff"
  fillColor="#3d3aff"
  fillMode={true}
  borderRadius={7}
  animationType="bouncy"
  onPress={handleToggle}
/>

<CheckBox
  isChecked={isChecked}
  checkColor="#eef3ff"
  fillColor="#1c1c1c"
  fillMode={true}
  borderRadius={20}
  onPress={handleToggle}
/>

<CheckBox
  isChecked={isChecked}
  borderRadius={20}
  animationType="opacity"
  onPress={handleToggle}
/>

Advanced Usage

<Pressable
  style={{
    borderWidth: 1,
    width: "90%",
    padding: 16,
    borderRadius: 10,
    flexDirection: "row",
    gap: 12,
    borderColor: isChecked ? "#1c1c1c" : "lightgray",
  }}
  onPress={handleToggle}
>
  <CheckBox
    isChecked={isChecked}
    checkColor={"lightgray"}
    fillColor={isChecked ? "#1c1c1c" : undefined}
    borderRadius={20}
    borderWidth={1.2}
    onPress={handleToggle}
  />
    <Text style={{ letterSpacing: -0.4, fontSize: 16 }}>
      Go swimming 🏊🏻
    </Text>
</Pressable>