checkbox.md

Checkbox

Adapt UI provides three different themes for the checkbox with three sizes and five interaction states.

Simple Usage

import { Checkbox } from "@adaptui/react-native-tailwind";
export default function App() {
  return <Checkbox label="Fruits" />;
}

Table of Contents

• Themes
• Size
• Label
• Description
• Props

Themes

Adapt UI provides three themes for the checkbox: base, primary, and danger. You can use this themed checkbox based on your specific scenarios.

Usage

import { Checkbox, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Checkbox />
      <Checkbox themeColor="primary" />
      <Checkbox themeColor="danger" />
    </>
  );
}

Size

There are three different sizes for checkboxes in Adapt UI. Based on the hierarchy, you can switch between different sizes.

Usage

import { Checkbox, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Checkbox size="sm" />
      <Checkbox />
      <Checkbox size="lg" />
    </>
  );
}

Label

As the name suggests, it provides a label with a checkbox. Since this is an independent property, you can have labels with different themes, interactions, or even sizes.

Usage

import { Checkbox, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Checkbox label="Contact-less delivery" />
    </>
  );
}

Description

This property can give you description text along with the label.

Usage

import { Checkbox, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Checkbox
        label="Get Prime feature during your flight"
        description="Pre-select your food, get more leg room seat and fast check-in. Extra charges apply."
      />
    </>
  );
}

Indeterminate

In some scenarios, we have a checkbox group under a category. You can use indeterminate property to switch between indeterminate or unchecked states. We will use <CheckboxGroup /> for the demo purpose.

Usage

import {
  Box,
  Checkbox,
  CheckboxGroup,
  useTheme,
} from "@adaptui/react-native-tailwind";

export const App = () => { 
  const tailwind = useTheme(); 
  return ( 
    <Box style={tailwind.style("h-full justify-center items-center bg-white-900")}>
      <CheckboxGroup> 
        <Checkbox label="Fund Category" isIndeterminate /> 
        <Box style={tailwind.style("ml-[25px]")}> 
          <Checkbox value="Equity" label="Equity" />
          <Checkbox value="Debt" label="Debt" />
          <Checkbox value="Hybrid" label="Hybrid" />
          <Checkbox value="International Equity" label="International Equity" />
          <Checkbox value="Solution Oriented" label="Solution Oriented" /> 
        </Box>
      </CheckboxGroup> 
    </Box> 
  ); 
};

Props

Name	Description	Type	Default
size	Size of the checkbox	sm md lg	md
themeColor	Theme of checkbox	base primary danger	base
isSelected	Checkbox state (controlled)	boolean	false
defaultSelected	Checkbox state (uncontrolled)	boolean	false
isIndeterminate	Checkbox indeterminated state	boolean	false
setSelected	Checkbox onState Change	(isSelected: boolean) => void
isDisabled	Checkbox Disabled State	boolean	false
isInvalid	Checkbox Invalid State	boolean	false
value*	Checkbox state value (CheckboxGroup)	string
accessibilityLabel	Accessibility Label for Checkbox	string	"Check me"

value prop is only required when using inside of CheckboxGroup

Also Check

• CheckboxGroup