checkbox.md

Checkbox

Usage

import React, { useState } from 'react-native';
import { Checkbox } from '@pbsc/react-native-ui-components';

const [checked, setChecked] = useState(false);

// ...

const handleCheckboxChange = (value) => {
    setChecked(value);
};

// ...

<Checkbox
    label="This is Checkbox"
    checked={checked}
    onChange={handleCheckboxChange}
    helperText="This is helper text for checkbox."
    hasHelperTextIcon={true}
        helperTextCustomIcon={
        <Image
            source={require('../images/info.png')}
            style={{ width: 12, height: 12 }}

        />
        }
/>

Props

label

Type: string
The text to use for the label.

labelComponent

Type: Component
Label component to use as label. When defined, it would not use the label prop, and would render the component as a Label instead.

checked

Type: boolean
Default value: false
Whether the Checkbox is checked or not. If true the Checkbox will be turned on

onChange

Type: function
Callback that is called when the Checkbox's status changes. (checked -> unchecked or vice versa)

helperText

Type: string
Text for additional info.

disabled

Type: boolean
Default value: false
If true, user won't be able to interact with the component.

width

Type: string/number
Default value: '80%'
Set the width of the Checkbox including its label

size

Type: number
Default value: 32 Set the size of the Checkbox

borderWidth

Type: number
Default value: 2 Set the width of the Checkbox's border

borderColor

Type: hexColorCode (ex: #ff00ff)
Default value: #7a81ff
Border color of the Checkbox

backgroundColorUnchecked

Type: hexColorCode (ex: #ff00ff)
Default value: #ebebeb
Background color when the Checkbox is unchecked.

backgroundColorChecked

Type: hexColorCode (ex: #ff00ff)
Default value: #7a81ff
Background color when the Checkbox is checked.

checkmarkColor

Type: hexColorCode (ex: #ff00ff)
Default value: #ffffff
Checkmark's color

labelColor

Type: hexColorCode (ex: #ff00ff)
Default value: #000000
Label's color

style

Type: object
Set style of checkbox part

labelStyle

Type: object
Set style of label part

helperTextStyle

Type: object
Set style of helper text part

hasHelperTextIcon

Type: boolean
Enable custom component (ex: helperTextCustomIcon) to place before helperText

helperTextCustomIcon

Type: jsx component
A custom component (usually svg component or Image) to place icon before helperText and can be used for errors as well.

onLabelPress

Type: function
Callback function invoked when the checkbox label is pressed. If the labelComponent is defined, this would not be invoked. It is called only if the label prop is provided.