Checkbox

Checkbox with checked, unchecked, and disabled states.

Web preview — components render natively on iOS & Android

import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";

export function MyScreen() {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onCheckedChange={setChecked} />
  );
}

Installation#

npx @aniui/cli add checkbox

Usage#

app/index.tsx

import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";

export function MyScreen() {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onCheckedChange={setChecked} />
  );
}

States#

Unchecked

Checked

Disabled

Web preview — components render natively on iOS & Android

<Checkbox checked={false} />
<Checkbox checked={true} />
<Checkbox disabled />

Props#

PropTypeDefault

checked

boolean

false

onCheckedChange

(checked: boolean) => void

—

disabled

boolean

false

className

string

—

Also accepts all Pressable props from React Native.

Accessibility#

Uses @rn-primitives/checkbox for checked/indeterminate state management.
Checked state is announced to screen readers automatically.

Source#

components/ui/checkbox.tsx

import React from "react";
import { Pressable, View, Text } from "react-native";
import * as CheckboxPrimitive from "@rn-primitives/checkbox";
import { cn } from "@/lib/utils";

export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
  className?: string;
  checked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
}

export function Checkbox({ checked = false, onCheckedChange, className, disabled, ...props }: CheckboxProps) {
  return (
    <CheckboxPrimitive.Root
      checked={checked}
      onCheckedChange={onCheckedChange}
      disabled={disabled}
      asChild
    >
      <Pressable
        className="min-h-12 min-w-12 items-center justify-center"
        accessible={true}
        accessibilityRole="checkbox"
        accessibilityState={{ checked, disabled: !!disabled }}
        onPress={() => !disabled && onCheckedChange?.(!checked)}
        {...props}
      >
        <View
          className={cn(
            "h-5 w-5 items-center justify-center rounded border",
            checked ? "border-primary bg-primary" : "border-input bg-background",
            disabled && "opacity-50",
            className
          )}
        >
          <CheckboxPrimitive.Indicator>
            <Text className="text-xs text-primary-foreground font-bold">✓</Text>
          </CheckboxPrimitive.Indicator>
        </View>
      </Pressable>
    </CheckboxPrimitive.Root>
  );
}

Previous← Chat Bubble NextChip →