Checkbox component of the UILaunch design system, how to import it and its usage.

☑️ Checkbox

The Checkbox component allows users to select one or more options from a set. It provides a simple way to represent boolean values (checked or unchecked) and includes a built-in animation when toggling between states.

Use it when you need to represent binary options like accepting terms and conditions, toggling settings, or selecting multiple items from a list.

checkbox

📦 Import

import Checkbox from '@madefordevs1999/ui-launch-native/system/atoms/Checkbox';

🧩 Usage

import Checkbox from '@madefordevs1999/ui-launch-native/system/atoms/Checkbox';
import { View } from 'react-native';
import { useState } from 'react';

const App = () => {
  const [checked, setChecked] = useState(true);

  return (
    <View style={{ padding: 20 }}>
      <Checkbox
        value={checked}
        onValueChange={setChecked}
        disabled={false}
      />
    </View>
  );
};

export default App;

Results

checkbox-example

🧪 Composition

If you want to add a label or descripion text next to the checkbox, you can use the CheckboxWithLabel component, which is a wrapper around the Checkbox component that adds a label next to the checkbox.

📜 Props

Prop Name	Type	Default	Description
disabled	`boolean`	`false`	Disables the checkbox when true, preventing any interaction.
value	`boolean`	`false`	Current checked state of the checkbox.
initialValue	`boolean`	`false`	Initial state before the user interaction begins.
onValueChange	`(value: boolean) => void`	`undefined`	Callback function triggered when the checkbox state changes.
wrapperProps	`PressableProps`	`undefined`	Additional props passed to the outer `Pressable` container.
children	`React.ReactNode`	`undefined`	Optional label or content displayed next to the checkbox.