Checkbox

Checkbox control with label for boolean selections.

Basic Usage

import { Checkbox } from '@multinaire/ui';

<Checkbox
  title="I agree to the terms"
  value={agreed}
  onChange={setAgreed}
/>

Props

Prop	Type	Default	Description
title	string	—	Label displayed next to the checkbox
value	boolean	—	Whether the checkbox is checked
testID	string	—	Test identifier for UI automation
onChange	(value: boolean) => void	—	Callback invoked when the checked state changes
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin

Examples

Basic Checkbox

const [isChecked, setIsChecked] = useState(false);

<Checkbox
  title="Enable notifications"
  value={isChecked}
  onChange={setIsChecked}
/>

Terms Agreement

<Checkbox
  title="I agree to the Terms of Service and Privacy Policy"
  value={agreed}
  onChange={setAgreed}
/>

Multiple Options

<Container gap={8}>
  <Checkbox
    title="Email notifications"
    value={emailNotifications}
    onChange={setEmailNotifications}
  />
  <Checkbox
    title="Push notifications"
    value={pushNotifications}
    onChange={setPushNotifications}
  />
  <Checkbox
    title="SMS notifications"
    value={smsNotifications}
    onChange={setSmsNotifications}
  />
</Container>

With Margin

<Checkbox
  title="Remember me"
  value={rememberMe}
  onChange={setRememberMe}
  margin={{ top: 16 }}
/>