Saaj UI

Checkbox

A control that allows the user to toggle between checked and not checked.

Preview

Installation

npx saaj add Checkbox

Usage

MyCheckbox.tsx
import { createStyleSheet, useStyles } from 'react-native-unistyles';
 
import { Checkbox, CheckboxIndicator } from '@/components/ui/Checkbox';
import { Text } from '@/components/ui/Text';
 
export function MyCheckbox() {
  const { styles } = useStyles(stylesheet);
 
  return (
    <Checkbox style={styles.checkbox}>
      <CheckboxIndicator />
      <Text variant="labelMd" highContrast>
        I agree to the terms and conditions.
      </Text>
    </Checkbox>
  );
}
 
const stylesheet = createStyleSheet(theme => ({
  checkbox: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: theme.space[8],
  },
}))

On this page