CheckBox | NativeBase


Playground
const Example = () => {
  return <HStack space={6}>
      <Checkbox value="test" accessibilityLabel="This is a dummy checkbox" />
      <Checkbox value="test" accessibilityLabel="This is a dummy checkbox" defaultIsChecked />
    </HStack>;
};const Example = () => {
  return <HStack space={6}>
      <Checkbox value="test" accessibilityLabel="This is a dummy checkbox" />
      <Checkbox value="test" accessibilityLabel="This is a dummy checkbox" defaultIsChecked />
    </HStack>;
};

Controlled


Playground
const Example = () => {
  const [groupValues, setGroupValues] = React.useState([]);
  return <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox value="one" my={2}>
        One
      </Checkbox>
      <Checkbox value="two">Two</Checkbox>
    </Checkbox.Group>;
};const Example = () => {
  const [groupValues, setGroupValues] = React.useState([]);
  return <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox value="one" my={2}>
        One
      </Checkbox>
      <Checkbox value="two">Two</Checkbox>
    </Checkbox.Group>;
};

Uncontrolled


Playground
const Example = () => {
  return <Checkbox.Group accessibilityLabel="choose values">
      <Checkbox value="one" my={2}>
        value 1
      </Checkbox>
      <Checkbox value="two">value 2</Checkbox>
    </Checkbox.Group>;
};const Example = () => {
  return <Checkbox.Group accessibilityLabel="choose values">
      <Checkbox value="one" my={2}>
        value 1
      </Checkbox>
      <Checkbox value="two">value 2</Checkbox>
    </Checkbox.Group>;
};

Disabled


Playground
const Example = () => {
  return <VStack space={2}>
      <Checkbox isDisabled value="one">
        Checkbox
      </Checkbox>
      <Checkbox isDisabled defaultIsChecked value="two">
        Checkbox
      </Checkbox>
    </VStack>;
};const Example = () => {
  return <VStack space={2}>
      <Checkbox isDisabled value="one">
        Checkbox
      </Checkbox>
      <Checkbox isDisabled defaultIsChecked value="two">
        Checkbox
      </Checkbox>
    </VStack>;
};

Invalid


Playground
const Example = () => {
  return <Checkbox isInvalid value="invalid">
      Checkbox
    </Checkbox>;
};const Example = () => {
  return <Checkbox isInvalid value="invalid">
      Checkbox
    </Checkbox>;
};

Custom Color


Playground
const Example = () => {
  return <VStack space={3} alignItems="flex-start">
      <Checkbox value="danger" colorScheme="danger" defaultIsChecked>
        Danger
      </Checkbox>
      <Checkbox value="info" colorScheme="info" defaultIsChecked>
        Info
      </Checkbox>
      <Checkbox value="orange" colorScheme="orange" defaultIsChecked>
        Orange
      </Checkbox>
      <Checkbox value="purple" colorScheme="purple" defaultIsChecked>
        Purple
      </Checkbox>
    </VStack>;
};const Example = () => {
  return <VStack space={3} alignItems="flex-start">
      <Checkbox value="danger" colorScheme="danger" defaultIsChecked>
        Danger
      </Checkbox>
      <Checkbox value="info" colorScheme="info" defaultIsChecked>
        Info
      </Checkbox>
      <Checkbox value="orange" colorScheme="orange" defaultIsChecked>
        Orange
      </Checkbox>
      <Checkbox value="purple" colorScheme="purple" defaultIsChecked>
        Purple
      </Checkbox>
    </VStack>;
};

Custom Icon


Playground
const Example = () => {
  return <VStack space={3} alignItems="flex-start">
      <Checkbox value="orange" colorScheme="orange" size="md" icon={<Icon as={<MaterialCommunityIcons name="bullseye" />} />} defaultIsChecked>
        Darts
      </Checkbox>
      <Checkbox value="dark" colorScheme="dark" size="md" icon={<Icon as={<MaterialCommunityIcons name="bat" />} />} defaultIsChecked>
        Movie
      </Checkbox>
      <Checkbox colorScheme="red" value="red" size="md" icon={<Icon as={<MaterialCommunityIcons name="campfire" />} />} defaultIsChecked>
        Camping
      </Checkbox>
      <Checkbox value="blue" colorScheme="blue" size="md" icon={<Icon as={<MaterialCommunityIcons name="chess-knight" />} />} defaultIsChecked>
        Chess
      </Checkbox>
    </VStack>;
};const Example = () => {
  return <VStack space={3} alignItems="flex-start">
      <Checkbox value="orange" colorScheme="orange" size="md" icon={<Icon as={<MaterialCommunityIcons name="bullseye" />} />} defaultIsChecked>
        Darts
      </Checkbox>
      <Checkbox value="dark" colorScheme="dark" size="md" icon={<Icon as={<MaterialCommunityIcons name="bat" />} />} defaultIsChecked>
        Movie
      </Checkbox>
      <Checkbox colorScheme="red" value="red" size="md" icon={<Icon as={<MaterialCommunityIcons name="campfire" />} />} defaultIsChecked>
        Camping
      </Checkbox>
      <Checkbox value="blue" colorScheme="blue" size="md" icon={<Icon as={<MaterialCommunityIcons name="chess-knight" />} />} defaultIsChecked>
        Chess
      </Checkbox>
    </VStack>;
};

Size


Playground
const Example = () => {
  return <VStack space={3}>
      <Checkbox value="red" colorScheme="red" size="sm" defaultIsChecked>
        Checkbox
      </Checkbox>
      <Checkbox colorScheme="green" size="md" defaultIsChecked value="green">
        Checkbox
      </Checkbox>
      <Checkbox colorScheme="yellow" value="yellow" size="lg" defaultIsChecked>
        Checkbox
      </Checkbox>
    </VStack>;
};const Example = () => {
  return <VStack space={3}>
      <Checkbox value="red" colorScheme="red" size="sm" defaultIsChecked>
        Checkbox
      </Checkbox>
      <Checkbox colorScheme="green" size="md" defaultIsChecked value="green">
        Checkbox
      </Checkbox>
      <Checkbox colorScheme="yellow" value="yellow" size="lg" defaultIsChecked>
        Checkbox
      </Checkbox>
    </VStack>;
};

Checkbox Group


Playground
const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Item 1", "Item 3"]);

  const getSelectedGroupValue = () => {
    if (groupValue.length === 0) return "[]";
    let arrayString = groupValue.reduce((accumulator, currentValue) => accumulator + ", " + currentValue);
    return "[" + arrayString + "]";
  };

  return <Box display="flex" justifyContent="space-between" alignItems="center">
      <HStack mb={3} alignItems="baseline">
        <Heading mt={3}>CheckboxGroup </Heading>
      </HStack>
      <Checkbox.Group colorScheme="green" defaultValue={groupValue} accessibilityLabel="pick an item" onChange={values => {
      setGroupValue(values || []);
    }}>
        <Checkbox value="Item 1" my={1}>
          Item 1
        </Checkbox>
        <Checkbox value="Item 2" my={1}>
          Item 2
        </Checkbox>
        <Checkbox value="Item 3" my={1}>
          Item 3
        </Checkbox>
        <Checkbox colorScheme="orange" isIndeterminate value="Indeterminate Item" my={1}>
          Indeterminate Item
        </Checkbox>
      </Checkbox.Group>
      <VStack mt={3}>
        <Box>
          <Text fontSize="md">Selected Values: </Text>
          <Text fontSize="md" bold>
            {getSelectedGroupValue()}
          </Text>
        </Box>
      </VStack>
    </Box>;
};const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Item 1", "Item 3"]);

  const getSelectedGroupValue = () => {
    if (groupValue.length === 0) return "[]";
    let arrayString = groupValue.reduce((accumulator, currentValue) => accumulator + ", " + currentValue);
    return "[" + arrayString + "]";
  };

  return <Box display="flex" justifyContent="space-between" alignItems="center">
      <HStack mb={3} alignItems="baseline">
        <Heading mt={3}>CheckboxGroup </Heading>
      </HStack>
      <Checkbox.Group colorScheme="green" defaultValue={groupValue} accessibilityLabel="pick an item" onChange={values => {
      setGroupValue(values || []);
    }}>
        <Checkbox value="Item 1" my={1}>
          Item 1
        </Checkbox>
        <Checkbox value="Item 2" my={1}>
          Item 2
        </Checkbox>
        <Checkbox value="Item 3" my={1}>
          Item 3
        </Checkbox>
        <Checkbox colorScheme="orange" isIndeterminate value="Indeterminate Item" my={1}>
          Indeterminate Item
        </Checkbox>
      </Checkbox.Group>
      <VStack mt={3}>
        <Box>
          <Text fontSize="md">Selected Values: </Text>
          <Text fontSize="md" bold>
            {getSelectedGroupValue()}
          </Text>
        </Box>
      </VStack>
    </Box>;
};

Form Controlled


Playground
const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Item 1", "Item 3"]);

  const getSelectedGroupValue = () => {
    if (groupValue.length === 0) return "[]";
    let arrayString = groupValue.reduce((accumulator, currentValue) => accumulator + ", " + currentValue);
    return "[" + arrayString + "]";
  };

  return <Container>
      <FormControl isRequired isInvalid>
        <FormControl.Label>Select Item</FormControl.Label>
        <Checkbox.Group colorScheme="green" defaultValue={groupValue} accessibilityLabel="choose multiple items" onChange={values => {
        setGroupValue(values || []);
      }} alignItems="flex-start">
          <Checkbox value="Item 1" my={1}>
            Item 1
          </Checkbox>
          <Checkbox value="Item 2" my={1}>
            Item 2
          </Checkbox>
          <Checkbox value="Item 3" my={1}>
            Item 3
          </Checkbox>
          <Checkbox colorScheme="orange" isIndeterminate value="Indeterminate Item" my={1}>
            Indeterminate Item
          </Checkbox>
        </Checkbox.Group>
        <FormControl.HelperText>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </FormControl>

      <VStack mt={4} alignItems="baseline">
        <Text fontSize="md">Selected Values: </Text>
        <Text fontSize="md" bold>
          {getSelectedGroupValue()}
        </Text>
      </VStack>
    </Container>;
};const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Item 1", "Item 3"]);

  const getSelectedGroupValue = () => {
    if (groupValue.length === 0) return "[]";
    let arrayString = groupValue.reduce((accumulator, currentValue) => accumulator + ", " + currentValue);
    return "[" + arrayString + "]";
  };

  return <Container>
      <FormControl isRequired isInvalid>
        <FormControl.Label>Select Item</FormControl.Label>
        <Checkbox.Group colorScheme="green" defaultValue={groupValue} accessibilityLabel="choose multiple items" onChange={values => {
        setGroupValue(values || []);
      }} alignItems="flex-start">
          <Checkbox value="Item 1" my={1}>
            Item 1
          </Checkbox>
          <Checkbox value="Item 2" my={1}>
            Item 2
          </Checkbox>
          <Checkbox value="Item 3" my={1}>
            Item 3
          </Checkbox>
          <Checkbox colorScheme="orange" isIndeterminate value="Indeterminate Item" my={1}>
            Indeterminate Item
          </Checkbox>
        </Checkbox.Group>
        <FormControl.HelperText>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </FormControl>

      <VStack mt={4} alignItems="baseline">
        <Text fontSize="md">Selected Values: </Text>
        <Text fontSize="md" bold>
          {getSelectedGroupValue()}
        </Text>
      </VStack>
    </Container>;
};

Basic (With Ref)


Playground
const Example = () => {
  const myRef = React.useRef({});
  return <Checkbox value="success" colorScheme="success" icon={<Icon as={MaterialCommunityIcons} name="bullseye" opacity={1} />} ref={myRef} onChange={state => {
    if (state) myRef.current.setNativeProps({
      backgroundColor: "#00de0050"
    });else myRef.current.setNativeProps({
      backgroundColor: "#fa000050"
    });
  }}>
      Label
    </Checkbox>;
};const Example = () => {
  const myRef = React.useRef({});
  return <Checkbox value="success" colorScheme="success" icon={<Icon as={MaterialCommunityIcons} name="bullseye" opacity={1} />} ref={myRef} onChange={state => {
    if (state) myRef.current.setNativeProps({
      backgroundColor: "#00de0050"
    });else myRef.current.setNativeProps({
      backgroundColor: "#fa000050"
    });
  }}>
      Label
    </Checkbox>;
};

Props

Checkbox

Checkbox implements

assign id to checkbox

Type: string

name

The name of the input field in a checkbox.

Type: string

value

The value to be used in the checkbox input. This is the value that will be returned on form submission.

Type: string

colorScheme

The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").

Type: string

defaultIsChecked

If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)

Type: boolean

isChecked

If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).

Type: boolean

isIndeterminate

If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox.

Type: boolean

isDisabled

If true, the checkbox will be disabled

Type: boolean

isInvalid

If true, the checkbox is marked as invalid. Changes style of unchecked state.

Type: boolean

size

The size (width and height) of the checkbox.

Type: "sm" | "md" | "lg"

Default: 'md'

icon

If given, will use this icon instead of the default.

Type: Element

onChange

Function called when the state of the checkbox changes.

Type: (isSelected: boolean) => void

wrapperRef

Ref to be passed to Icon's wrapper Box

Type: any

Checkbox.Group

CheckboxGroup implements

assign id to checkbox group

Type: string

value

The value of the checkbox group.

Type: any[]

defaultValue

The initial value of the checkbox group.

Type: any[]

colorScheme

The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").

Type: string

size

The size (width and height) of the checkbox.

Type: "sm" | "md" | "lg"

onChange

The callback fired when any children Checkbox is checked or unchecked.

Type: (values: any) => any

Styling

NativeBase ships with a default theme for each component. Check out the default theme of the checkbox

here

Info: We can easily extend the checkbox component theme using extendTheme function as described in the documentation

here

Accessibility

Uses React Native ARIA

@react-native-aria/checkbox

which follows the

Checkbox WAI-ARIA design pattern

Keyboard Interactions

Key

Description

Space

Checks/unchecks the checkbox.

Quick Nav

Keyboard Interactions

MadeWithNativeBase

gluestack-ui

CheckBox | NativeBase | Universal Components for React and React Native