CheckBox | NativeBase | Universal Components for React and React Native

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>;
};

Playground
const Example = () => {
  const [groupValues, setGroupValues] = React.useState([]);
  return <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox value="one" my={2}>
        UX Research
      </Checkbox>
      <Checkbox value="two">Software Development</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}>
        UX Research
      </Checkbox>
      <Checkbox value="two">Software Development</Checkbox>
    </Checkbox.Group>;
};

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

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

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

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>;
};

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>;
};

Playground
const Example = () => {
  return <Center>
      <Heading textAlign="center" mb="10">
        Sizes
      </Heading>
      <VStack space={3}>
        <Checkbox value="red" colorScheme="red" size="sm" defaultIsChecked>
          UX Research
        </Checkbox>
        <Checkbox colorScheme="green" size="md" defaultIsChecked value="green">
          Development
        </Checkbox>
        <Checkbox colorScheme="purple" value="yellow" size="lg" defaultIsChecked>
          Devops
        </Checkbox>
      </VStack>
    </Center>;
};
const Example = () => {
  return <Center>
      <Heading textAlign="center" mb="10">
        Sizes
      </Heading>
      <VStack space={3}>
        <Checkbox value="red" colorScheme="red" size="sm" defaultIsChecked>
          UX Research
        </Checkbox>
        <Checkbox colorScheme="green" size="md" defaultIsChecked value="green">
          Development
        </Checkbox>
        <Checkbox colorScheme="purple" value="yellow" size="lg" defaultIsChecked>
          Devops
        </Checkbox>
      </VStack>
    </Center>;
};

Playground
const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Photography", "Gardening"]);
  return <VStack space={2}>
      <HStack alignItems="baseline">
        <Heading fontSize="lg">Hobbies</Heading>
      </HStack>
      <VStack>
        <Box>
          <Text>Selected: ({groupValue.length})</Text>
        </Box>
      </VStack>
      <Checkbox.Group colorScheme="green" defaultValue={groupValue} accessibilityLabel="pick an item" onChange={values => {
      setGroupValue(values || []);
    }}>
        <Checkbox value="Photography" my="1">
          Photography
        </Checkbox>
        <Checkbox value="Writing" my="1">
          Writing
        </Checkbox>
        <Checkbox value="Gardening" my="1">
          Gardening
        </Checkbox>
        <Checkbox value="Cooking" my="1">
          Cooking
        </Checkbox>
      </Checkbox.Group>
    </VStack>;
};
const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Photography", "Gardening"]);
  return <VStack space={2}>
      <HStack alignItems="baseline">
        <Heading fontSize="lg">Hobbies</Heading>
      </HStack>
      <VStack>
        <Box>
          <Text>Selected: ({groupValue.length})</Text>
        </Box>
      </VStack>
      <Checkbox.Group colorScheme="green" defaultValue={groupValue} accessibilityLabel="pick an item" onChange={values => {
      setGroupValue(values || []);
    }}>
        <Checkbox value="Photography" my="1">
          Photography
        </Checkbox>
        <Checkbox value="Writing" my="1">
          Writing
        </Checkbox>
        <Checkbox value="Gardening" my="1">
          Gardening
        </Checkbox>
        <Checkbox value="Cooking" my="1">
          Cooking
        </Checkbox>
      </Checkbox.Group>
    </VStack>;
};

Playground
const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Phone", "Email"]);
  return <Container>
      <FormControl isInvalid>
        <FormControl.Label _text={{
        fontSize: "lg",
        bold: true
      }}>
          Preferred contact method
        </FormControl.Label>
        <Text fontSize="md">Selected Values: </Text>
        <Checkbox.Group mt="2" colorScheme="green" defaultValue={groupValue} accessibilityLabel="choose multiple items" onChange={values => {
        setGroupValue(values || []);
      }} alignItems="flex-start">
          <Checkbox value="Phone" my="1">
            Phone
          </Checkbox>
          <Checkbox value="Email" my="1">
            Email
          </Checkbox>
          <Checkbox value="Message" my="1">
            Message
          </Checkbox>
          <Checkbox value="Fax" my="1">
            Fax
          </Checkbox>
        </Checkbox.Group>
        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
          You must select at least three methods
        </FormControl.ErrorMessage>
      </FormControl>
    </Container>;
};
const Example = () => {
  const [groupValue, setGroupValue] = React.useState(["Phone", "Email"]);
  return <Container>
      <FormControl isInvalid>
        <FormControl.Label _text={{
        fontSize: "lg",
        bold: true
      }}>
          Preferred contact method
        </FormControl.Label>
        <Text fontSize="md">Selected Values: </Text>
        <Checkbox.Group mt="2" colorScheme="green" defaultValue={groupValue} accessibilityLabel="choose multiple items" onChange={values => {
        setGroupValue(values || []);
      }} alignItems="flex-start">
          <Checkbox value="Phone" my="1">
            Phone
          </Checkbox>
          <Checkbox value="Email" my="1">
            Email
          </Checkbox>
          <Checkbox value="Message" my="1">
            Message
          </Checkbox>
          <Checkbox value="Fax" my="1">
            Fax
          </Checkbox>
        </Checkbox.Group>
        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
          You must select at least three methods
        </FormControl.ErrorMessage>
      </FormControl>
    </Container>;
};

Playground
const Example = () => {
  const myRef = React.useRef();
  const [bg, setBg] = React.useState("#fa000050");
  React.useEffect(() => {
    const styleObj = {
      backgroundColor: bg
    };

    if (Platform.OS !== "web") {
      // @ts-ignore
      myRef.current.setNativeProps({
        style: styleObj
      });
    } else {
      // @ts-ignore
      myRef.current.setNativeProps({
        style: styleObj
      });
    }
  }, [myRef, bg]);
  return <Checkbox value="success" colorScheme="success" icon={<Icon as={MaterialCommunityIcons} name="bullseye" opacity={1} />} wrapperRef={myRef} onChange={state => {
    if (state) {
      setBg("#00de0050");
    } else {
      setBg("#fa000050");
    }
  }}>
      Archery
    </Checkbox>;
};
const Example = () => {
  const myRef = React.useRef();
  const [bg, setBg] = React.useState("#fa000050");
  React.useEffect(() => {
    const styleObj = {
      backgroundColor: bg
    };

    if (Platform.OS !== "web") {
      // @ts-ignore
      myRef.current.setNativeProps({
        style: styleObj
      });
    } else {
      // @ts-ignore
      myRef.current.setNativeProps({
        style: styleObj
      });
    }
  }, [myRef, bg]);
  return <Checkbox value="success" colorScheme="success" icon={<Icon as={MaterialCommunityIcons} name="bullseye" opacity={1} />} wrapperRef={myRef} onChange={state => {
    if (state) {
      setBg("#00de0050");
    } else {
      setBg("#fa000050");
    }
  }}>
      Archery
    </Checkbox>;
};