Skip to main content

Checkbox

Inputs & Controls

Checkbox

Cross-platform checkbox with Material states for Android and iOS variants.

Usage

Collect true/false responses or build multi-select lists.

Highlights

  • Platform-specific rendering
  • Supports indeterminate visual state

When to use it

  • Users can toggle multiple options in filters.
  • You must represent tri-state data (checked, unchecked, mixed).

Related components

RadioButtonSwitch

Examples​

Default​

Preview (Web)
import { Checkbox } from 'react-native-molecules/components/Checkbox';

export default function Example() {
  return <Checkbox indeterminate={false} defaultValue />;
}

Checkbox with Label​

Preview (Web)
import { Checkbox } from 'react-native-molecules/components/Checkbox';

export default function Example() {
  return <Checkbox indeterminate={false} defaultValue label="Label" />;
}
PropTypeDefaultDescription
hitSlopnumber | Insets | null | undefined——
idstring | undefined——
needsOffscreenAlphaCompositingboolean | undefined——
onLayout((event: LayoutChangeEvent) => void) | undefined——
pointerEvents"box-none" | "none" | "box-only" | "auto" | undefined——
removeClippedSubviewsboolean | undefined——
style(((false | "" | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)) & (false | "" | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>>)) & (false | "" | TextStyle | RegisteredStyle<TextStyle> | RecursiveArray<Falsy | TextStyle | RegisteredStyle<TextStyle>>)) | null | undefined——
testIDstring | undefined——
nativeIDstring | undefined——
collapsableboolean | undefined——
collapsableChildrenboolean | undefined——
onBlur((event: NativeSyntheticEvent<TargetedEvent>) => void) | null | undefined——
onFocus((event: NativeSyntheticEvent<TargetedEvent>) => void) | null | undefined——
renderToHardwareTextureAndroidboolean | undefined——
focusableboolean | undefined——
tabIndex0 | -1 | undefined——
shouldRasterizeIOSboolean | undefined——
isTVSelectableboolean | undefined——
hasTVPreferredFocusboolean | undefined——
tvParallaxShiftDistanceXnumber | undefined——
tvParallaxShiftDistanceYnumber | undefined——
tvParallaxTiltAnglenumber | undefined——
tvParallaxMagnificationnumber | undefined——
onStartShouldSetResponder((event: GestureResponderEvent) => boolean) | undefined——
onMoveShouldSetResponder((event: GestureResponderEvent) => boolean) | undefined——
onResponderEnd((event: GestureResponderEvent) => void) | undefined——
onResponderGrant((event: GestureResponderEvent) => void) | undefined——
onResponderReject((event: GestureResponderEvent) => void) | undefined——
onResponderMove((event: GestureResponderEvent) => void) | undefined——
onResponderRelease((event: GestureResponderEvent) => void) | undefined——
onResponderStart((event: GestureResponderEvent) => void) | undefined——
onResponderTerminationRequest((event: GestureResponderEvent) => boolean) | undefined——
onResponderTerminate((event: GestureResponderEvent) => void) | undefined——
onStartShouldSetResponderCapture((event: GestureResponderEvent) => boolean) | undefined——
onMoveShouldSetResponderCapture((event: GestureResponderEvent) => boolean) | undefined——
onTouchStart((event: GestureResponderEvent) => void) | undefined——
onTouchMove((event: GestureResponderEvent) => void) | undefined——
onTouchEnd((event: GestureResponderEvent) => void) | undefined——
onTouchCancel((event: GestureResponderEvent) => void) | undefined——
onTouchEndCapture((event: GestureResponderEvent) => void) | undefined——
onPointerEnter((event: PointerEvent) => void) | undefined——
onPointerEnterCapture((event: PointerEvent) => void) | undefined——
onPointerLeave((event: PointerEvent) => void) | undefined——
onPointerLeaveCapture((event: PointerEvent) => void) | undefined——
onPointerMove((event: PointerEvent) => void) | undefined——
onPointerMoveCapture((event: PointerEvent) => void) | undefined——
onPointerCancel((event: PointerEvent) => void) | undefined——
onPointerCancelCapture((event: PointerEvent) => void) | undefined——
onPointerDown((event: PointerEvent) => void) | undefined——
onPointerDownCapture((event: PointerEvent) => void) | undefined——
onPointerUp((event: PointerEvent) => void) | undefined——
onPointerUpCapture((event: PointerEvent) => void) | undefined——
accessibleboolean | undefined——
accessibilityActionsreadonly Readonly<{ name: AccessibilityActionName | string; label?: string | undefined; }>[] | undefined——
accessibilityLabelstring | undefined——
aria-labelstring | undefined——
accessibilityRoleAccessibilityRole | undefined——
accessibilityStateAccessibilityState | undefined——
aria-busyboolean | undefined——
aria-checkedboolean | "mixed" | undefined——
aria-disabledboolean | undefined——
aria-expandedboolean | undefined——
aria-selectedboolean | undefined——
accessibilityHintstring | undefined——
accessibilityValueAccessibilityValue | undefined——
aria-valuemaxnumber | undefined——
aria-valueminnumber | undefined——
aria-valuenownumber | undefined——
aria-valuetextstring | undefined——
onAccessibilityAction((event: AccessibilityActionEvent) => void) | undefined——
importantForAccessibility"auto" | "yes" | "no" | "no-hide-descendants" | undefined——
aria-hiddenboolean | undefined——
aria-modalboolean | undefined——
roleRole | undefined——
accessibilityLabelledBystring | string[] | undefined——
aria-labelledbystring | undefined——
accessibilityLiveRegion"none" | "polite" | "assertive" | undefined——
aria-live"polite" | "assertive" | "off" | undefined——
screenReaderFocusableboolean | undefined——
accessibilityElementsHiddenboolean | undefined——
accessibilityViewIsModalboolean | undefined——
onAccessibilityEscape(() => void) | undefined——
onAccessibilityTap(() => void) | undefined——
onMagicTap(() => void) | undefined——
accessibilityIgnoresInvertColorsboolean | undefined——
accessibilityLanguagestring | undefined——
accessibilityShowsLargeContentViewerboolean | undefined——
accessibilityLargeContentTitlestring | undefined——
accessibilityRespondsToUserInteractionboolean | undefined——
onPress(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined——
onPressIn((event: GestureResponderEvent) => void) | null | undefined——
onPressOut((event: GestureResponderEvent) => void) | null | undefined——
onLongPress(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined——
pressRetentionOffsetnumber | Insets | null | undefined——
disabledboolean | undefined——
onHoverIn((event: MouseEvent) => void) | null | undefined——
onHoverOut((event: MouseEvent) => void) | null | undefined——
cancelableboolean | null | undefined——
delayHoverInnumber | null | undefined——
delayHoverOutnumber | null | undefined——
delayLongPressnumber | null | undefined——
android_disableSoundboolean | null | undefined——
android_ripplePressableAndroidRippleConfig | null | undefined——
testOnly_pressedboolean | null | undefined——
unstable_pressDelaynumber | undefined——
borderlessboolean | undefined——
backgroundObject | undefined——
centeredboolean | undefined——
rippleColorstring | undefined——
underlayColorstring | undefined——
valueboolean | undefined——
defaultValueboolean | undefined——
onChange((newValue: boolean) => void) | undefined——
indeterminateboolean | undefined——
sizeSize | undefined——
uncheckedColorstring | undefined——
colorstring | undefined——
labelstring | undefined——
labelStyleRequiredStyleProp<TextStyle>——
containerStyleViewStyle | undefined——
labelPropsOmit<TextProps, "children" | "style"> | undefined——
position"leading" | "trailing" | undefined——
Defined in react-native-molecules/components/Checkbox