Checkbox

Component to render a checkbox input.

Import

import { Checkbox, CheckboxGroup, Button } from 'react-native-ficus-ui';

Usage

Simple checkbox

EDITABLE EXAMPLE

<VStack spacing="md">
  <Checkbox>Option 1</Checkbox>
  <Checkbox colorScheme="red" defaultChecked>Option 1</Checkbox>
</VStack>

Custom icon

EDITABLE EXAMPLE

<VStack spacing="md">
  <Checkbox colorScheme="purple" defaultChecked icon={<Icon name="flash-outline" />}>Option 1</Checkbox>
</VStack>

Checkbox sizes

EDITABLE EXAMPLE

<VStack spacing="md">
  <Checkbox size="xs">Option 1</Checkbox>
  <Checkbox size="sm">Option 2</Checkbox>
  <Checkbox size="md">Option 3</Checkbox>
  <Checkbox size="lg">Option 4</Checkbox>
</VStack>

Checkbox disabled

EDITABLE EXAMPLE

<HStack spacing="md">
  <Checkbox isDisabled>
    Option 1
  </Checkbox>
  <Checkbox isDisabled defaultChecked>
    Option 1
  </Checkbox>
</HStack>

Checkbox group

EDITABLE EXAMPLE

<CheckboxGroup colorScheme="green" defaultValue={[2, 3]}>
  <VStack spacing="sm">
    <Checkbox value={1}>Option 1</Checkbox>
    <Checkbox value={2}>Option 2</Checkbox>
    <Checkbox value={3}>Option 3</Checkbox>
    <Checkbox value={4}>Option 4</Checkbox>
  </VStack>
</CheckboxGroup>

Custom render

EDITABLE EXAMPLE

<CheckboxGroup flexDirection="row">
  <HStack spacing="sm">
    {["Option 1", "Option 2", "Option 3"].map((item) => (
      <Checkbox value={item}>
        {({ isChecked, onToggle }) => (
          <Button
            bg={isChecked ? "blue.600" : "blue.100"}
            px="xl"
            py="md"
            mr="md"
            borderRadius="full"
            onPress={onToggle}
          >
            <Text color={isChecked ? "white" : "gray.800"}>{item}</Text>
          </Button>
        )}

      </Checkbox>
    ))}
  </HStack>
</CheckboxGroup>

Props

Checkbox props

Extends every TouchableOpacity props.

`colorScheme`

The colorScheme property, will define checkbox color.

Type	Required	Default
string	No

`defaultChecked`

Boolean to indicate if checkbox should be checked by default.

Type	Required	Default
boolean	No

`isChecked`

Boolean to indicate if checkbox is checked.

Type	Required	Default
boolean	No

`isDisabled`

Boolean to indicate if checkbox is disabled.

Type	Required	Default
boolean	No

`value`

The value to be used in the checkbox.

Type	Required	Default
(value: string \| number) => void	No

`onChange`

Function called when checked status changes on checkbox, value is returned as param.

Type	Required	Default
(value: string \| number) => void	No

`onToggle`

Function that applies the toggle logic for when an item is checked.

Type	Required	Default
(event : GestureEvent) => void	No

`icon`

Custom icon component to replace default checkbox icon.

Type	Required	Default
React.ReactNode	No

`size`

Size of checkbox.

Type	Required	Default
number \| 'xs' \| 'sm' \| 'md' \| 'lg'	No

CheckboxGroup props

`value`

The value of the checkbox group.

Type	Required	Default
(value: string \| number)[] => void	No

`onChange`

Function called when checked status changes on any checkbox children, value is returned as param.

Type	Required	Default
(value: (string \| number)[]) => void	No

`defaultValue`

Default value for the checkbox group.

Type	Required	Default
(string \| number)[]	No

`colorScheme`

The colorScheme property, will define group checkboxs color.

Type	Required	Default
string	No

DraggableModal Radio