CheckBox | NativeBase

Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).

CheckBox

The Checkbox component is used in forms when a user needs to select multiple values from several options.

Examples

Basic


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

Uncontrolled


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

Disabled


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

Invalid


Playground
const Example = () => {
  return <Checkbox isInvalid value="invalid">
      Software Development
    </Checkbox>;
};const Example = () => {
  return <Checkbox isInvalid value="invalid">
      Software Development
    </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 <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>;
};

Checkbox Group


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

Form Controlled


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

Basic (With Ref)


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

Props

Checkbox

Checkbox implements

wrapperRef

Ref to be passed to Icon's wrapper Box

Type: any

size

The size (width and height) of the checkbox.

Type: ResponsiveValue<"sm" | "md" | "lg">

Default: 'md'

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.

Type: boolean

isReadOnly

If true, the checkbox is marked as readonly.

Type: boolean

icon

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

Type: Element

_disabled

Passed props wilICheckboxGroupPropsl be applied on disabled state.

Type: Omit<ICheckboxProps, "_disabled">

_checked

Passed props will be applied on checked state.

Type: Omit<ICheckboxProps, "_checked">

_unchecked

Passed props will be applied on unchecked state.

Type: Omit<ICheckboxProps, "_unchecked">

_focus

Passed props will be applied on focus state.

Type: Omit<ICheckboxProps, "_focus">

_hover

Passed props will be applied on hover state.

Type: Omit<ICheckboxProps, "_hover">

_invalid

Passed props will be applied on invalid state.

Type: Omit<ICheckboxProps, "_invalid">

_pressed

Passed props will be applied on pressed state on native.

Type: Omit<ICheckboxProps, "_pressed">

_readOnly

Passed props will be applied on readonly state.

Type: Omit<ICheckboxProps, "_readOnly">

_icon

Icon related props can be passed in _icon.

Type:

IIconProps

_interactionBox

You can style interaction box around the checkbox using this.

Type: Omit<ICheckboxProps, "_interactionBox">

onChange

Function called when the state of the checkbox changes.

Type: (isSelected: boolean) => void

Checkbox.Group

CheckboxGroup implements

assign id to checkbox group

Type: string

value

The value of the checkbox group.

Type: string[]

defaultValue

The initial value of the checkbox group.

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

size

The size (width and height) of the checkbox.

Type: ResponsiveValue<"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

CheckBox | NativeBase | Universal Components for React and React Native