Skip to main content

Checkbox.Item

Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.

Usage​

import * as React from 'react';
import { View } from 'react-native';
import { Checkbox } from 'react-native-paper';

const MyComponent = () => (
  <View>
    <Checkbox.Item label="Item" status="checked" />
  </View>
);

export default MyComponent;

Props​

status (required)​

Type: 'checked' | 'unchecked' | 'indeterminate'

Status of checkbox.

disabled​

Type: boolean

Whether checkbox is disabled.

label (required)​

Type: string

Label to be displayed on the item.

onPress​

Type: (e: GestureResponderEvent) => void

Function to execute on press.

onLongPress​

Type: (e: GestureResponderEvent) => void

Function to execute on long press.

background​

Type: PressableAndroidRippleConfig

Type of background drawabale to display the feedback (Android). https://reactnative.dev/docs/pressable#rippleconfig

accessibilityLabel​

Type: string

Default value: label

Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.

uncheckedColor​

Type: string

Custom color for unchecked checkbox.

color​

Type: string

Custom color for checkbox.

rippleColor​

Type: ColorValue

Color of the ripple effect.

style​

Type: StyleProp<ViewStyle>

Additional styles for container View.

labelMaxFontSizeMultiplier​

Type: number

Default value: 1.5

Specifies the largest possible scale a label font can reach.

labelStyle​

Type: StyleProp<TextStyle>

Style that is passed to Label element.

labelVariant Available in v5.x with theme version 3​

Type: unknown

Default value: 'bodyLarge'

Label text variant defines appropriate text styles for type role and its size. Available variants:

Display: displayLarge, displayMedium, displaySmall

Headline: headlineLarge, headlineMedium, headlineSmall

Title: titleLarge, titleMedium, titleSmall

Label: labelLarge, labelMedium, labelSmall

Body: bodyLarge, bodyMedium, bodySmall

theme​

Type: ThemeProp

testID​

Type: string

testID to be used on tests.

position​

Type: 'leading' | 'trailing'

Default value: 'trailing'

Checkbox control position.

mode​

Type: 'android' | 'ios'

Whether <Checkbox.Android /> or <Checkbox.IOS /> should be used. Left undefined <Checkbox /> will be used.