1interface ICheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
2    width?: string | number;
3    height?: string | number;
4    label?: string;
5    variant?: 'primary' | 'secondary' | 'default';
6    wrapperStyles?: CSSProperties;
7    boxStyles?: CSSProperties;
8    indeterminate?: boolean;
9    disabled?: boolean;
10    checked?: boolean;
11    hasError?: boolean;
12    className?: string;
13    onFocusHandler?: (value: boolean) => void;
14    onBlurHandler?: (value: boolean) => void;
15    onChangeHandler: (value: boolean) => void;
16    onClearHandler?: (name: string) => void;
17}

1import { Checkbox } from 'neutrino-ui';
2const [check, setCheck] = useState(true);
3<Checkbox onChangeHandler={(v) => setCheck(v)} checked={check}>
4  Simple Checkbox
5</Checkbox>

1import { Checkbox } from 'neutrino-ui';
2const [check, setCheck] = useState(true);
3<Checkbox onChangeHandler={(v) => setCheck(v)} checked={check} variant="default">
4  Default Checkbox
5</Checkbox>

1import { Checkbox } from 'neutrino-ui';
2const [check, setCheck] = useState(true);
3<Checkbox onChangeHandler={(v) => setCheck(v)} checked={check} variant="secondary">
4  Secondary Checkbox
5</Checkbox>

1<Checkbox
2  onChangeHandler={(v) => setCheck(v)}
3  checked={check}
4  variant="default"
5  indeterminate>Indeterminate</Checkbox>

1import React, { useState } from 'react';
2import { ThemeProvider } from 'emotion-theming';
3import { Checkbox, createTheme } from 'neutrino-ui';
4
5const theme = createTheme({
6  globals: {
7    borderRadius: '32px',
8  },
9  colors: {
10    mainColors: {
11      primary: '#084a80',
12    },
13  },
14});