CheckBox

CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings - On or Off. It provides a clear visual of either a true or false choice.

Import

import { CheckBox } from '@rn-vui/themed';

Theme Key

CheckBox

Usage

Simple

{
  const [checked, setChecked] = React.useState(true);
  const toggleCheckbox = () => setChecked(!checked);
  return (
    <Stack row align="center" spacing={1}>
      <CheckBox
        checked={checked}
        onPress={toggleCheckbox}
        // Use ThemeProvider to make change for all checkbox
        iconType="material-community"
        checkedIcon="checkbox-marked"
        uncheckedIcon="checkbox-blank-outline"
        checkedColor="red"
      />
      <CheckBox
        checked={checked}
        onPress={toggleCheckbox}
        iconType="material-community"
        checkedIcon="checkbox-outline"
        uncheckedIcon={"checkbox-blank-outline"}
      />
      <CheckBox
        checked={false}
        disabled
        iconType="material-community"
        checkedIcon="checkbox-outline"
        uncheckedIcon={"checkbox-blank-outline"}
      />
    </Stack>
  );
}

Label

<Stack row align="center" spacing={4}>
  <CheckBox checked title="Label" />
  <CheckBox checked disabled title="Label" />
</Stack>

Radio

{
  const [selectedIndex, setIndex] = React.useState(0);

  return (
    <Stack row align="center" spacing={4}>
      <CheckBox
        checked={selectedIndex === 0}
        onPress={() => setIndex(0)}
        iconType="material-community"
        checkedIcon="radiobox-marked"
        uncheckedIcon="radiobox-blank"
      />
      <CheckBox
        checked={selectedIndex === 1}
        onPress={() => setIndex(1)}
        iconType="material-community"
        checkedIcon="radiobox-marked"
        uncheckedIcon="radiobox-blank"
      />
    </Stack>
  );
}

Size

<Stack row align="center" spacing={4}>
  <CheckBox checked size={18} />
  <CheckBox checked size={24} />
  <CheckBox checked size={32} />
</Stack>

Custom icon

{
  const [checked, setState] = React.useState(true);
  const toggleCheckbox = () => setState(!checked);
  return (
    <Stack row align="center">
      <CheckBox
        checked={checked}
        checkedIcon="heart"
        uncheckedIcon="heart-o"
        checkedColor="red"
        onPress={toggleCheckbox}
      />
      <CheckBox
        checked={checked}
        checkedIcon="bookmark"
        uncheckedIcon="bookmark-o"
        checkedColor="heart"
        onPress={toggleCheckbox}
      />
    </Stack>
  );
}

Props

note

Includes all CheckBoxIcon, View props.

Name	Type	Default	Description
Component	React Component		Specify React Native component for main button.
center	boolean	false	Aligns checkbox to center.
checkedTitle	string		Specify a custom checked message.
containerStyle	View Style		Style of main container.
disabled	boolean	false	Disables user interaction.
disabledStyle	View Style		Style of the checkbox container when disabled.
disabledTitleStyle	Text Style		Style of the title when disabled.
fontFamily	string		Specify different font family.
iconRight	boolean	false	Moves icon to right of text.
right	boolean	false	Aligns checkbox to right.
textStyle	Text Style		Style of text.
title	string | ReactElement<{}, string | JSXElementConstructor<any>>		Title of checkbox.
titleProps	TextProps	{}	Additional props for the title Text component.
wrapperStyle	View Style		Style for the wrapper of checkbox.

Playground

Loading...