CheckBox

CheckBox allows the user to select one or more items from a set. It supports checked, unchecked, and indeterminate states.

Import

import { CheckBox } from '@ui-kitten/components';

Basic Usage

import React, { useState } from 'react';
import { Layout, CheckBox } from '@ui-kitten/components';

const CheckBoxExample = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <CheckBox
        checked={checked}
        onChange={(nextChecked) => setChecked(nextChecked)}
      >
        Accept Terms
      </CheckBox>

      <CheckBox
        checked={true}
        indeterminate={true}
        status="warning"
      >
        Indeterminate
      </CheckBox>
    </Layout>
  );
};

Props

Property	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked.
indeterminate	boolean	false	Whether the checkbox displays an indeterminate state.
onChange	(checked: boolean) => void	-	Called when the checkbox value changes.
status	'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'	'basic'	Semantic color of the checkbox.
children	ReactText | (props) => ReactElement	undefined	Label text or render function displayed next to the checkbox.

Storybook

Live examples coming soon via Storybook.