Component

Checkbox

Animated checkbox with selected, disabled, and label support.

React Native

Checkbox

Independent binary selection.

Remember this device

import { useState } from 'react';
import { View } from 'react-native';
import { Checkbox, Text, useTheme } from '@sohantalukder/rn-kit';

export function TermsCheckbox() {
  const [accepted, setAccepted] = useState(false);
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_10]}>
      <Checkbox
        checked={accepted}
        accessibilityLabel="Accept terms"
        onPress={() => setAccepted((value) => !value)}
      />
      <Text>I agree to the terms</Text>
    </View>
  );
}

Live component

uncheckedcheckeddisabled

Use checkboxes for independent binary choices.
Keep labels explicit and tappable.

Usage

import { Checkbox } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { View } from 'react-native';
import { Checkbox, Text, useTheme } from '@sohantalukder/rn-kit';

export function TermsCheckbox() {
  const [accepted, setAccepted] = useState(false);
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_10]}>
      <Checkbox
        checked={accepted}
        accessibilityLabel="Accept terms"
        onPress={() => setAccepted((value) => !value)}
      />
      <Text>I agree to the terms</Text>
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

checkedbooleanfalseControls whether the checkbox is checked.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

sizeComponentSize | numbermediumControls the rendered component scale.

onPress() => void-Called when the pressable component is activated.

Theme

Checkbox reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

unchecked
checked
disabled

Best Practices

Use checkboxes for independent binary choices.
Keep labels explicit and tappable.