| 1 | import * as React from "react";
|
| 2 | import { BoxProps } from "../Box";
|
| 3 | import { Omit } from "../common-types";
|
| 4 |
|
| 5 | export interface ICheckbox {
|
| 6 | /**
|
| 7 | * id assigned to input
|
| 8 | */
|
| 9 | id?: string;
|
| 10 | /**
|
| 11 | * The name of the input field in a checkbox
|
| 12 | * (Useful for form submission).
|
| 13 | */
|
| 14 | name?: string;
|
| 15 | /**
|
| 16 | * The value to be used in the checkbox input.
|
| 17 | * This is the value that will be returned on form submission.
|
| 18 | */
|
| 19 | value?: string | number;
|
| 20 | /**
|
| 21 | * The color scheme of the checkbox.
|
| 22 | *
|
| 23 | * 🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).
|
| 24 | * @see http://chakra-ui.com/theme#colors
|
| 25 | */
|
| 26 | variantColor?: string;
|
| 27 | /**
|
| 28 | * If `true`, the checkbox will be initially checked.
|
| 29 | */
|
| 30 | defaultIsChecked?: boolean;
|
| 31 | /**
|
| 32 | * If `true`, the checkbox will be checked.
|
| 33 | * You'll need to pass `onChange` to update it's value (since it's now controlled)
|
| 34 | */
|
| 35 | isChecked?: boolean;
|
| 36 | /**
|
| 37 | * If `true`, the checkbox should take up the full width of the parent.
|
| 38 | */
|
| 39 | isFullWidth?: boolean;
|
| 40 | /**
|
| 41 | * The size (width and height) of the checkbox
|
| 42 | */
|
| 43 | size?: "sm" | "md" | "lg";
|
| 44 | /**
|
| 45 | * If `true`, the checkbox will be disabled
|
| 46 | */
|
| 47 | isDisabled?: boolean;
|
| 48 | /**
|
| 49 | * If `true`, the checkbox will be readonly
|
| 50 | */
|
| 51 | isReadOnly?: boolean;
|
| 52 | /**
|
| 53 | * If `true`, the checkbox is marked as invalid.
|
| 54 | * Changes style of unchecked state.
|
| 55 | */
|
| 56 | isInvalid?: boolean;
|
| 57 | /**
|
| 58 | * The callback invoked when the checked state of the `Checkbox` changes..
|
| 59 | */
|
| 60 | onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
| 61 | /**
|
| 62 | * If `true`, the checkbox will be indeterminate.
|
| 63 | * This only affects the icon shown inside checkbox
|
| 64 | * and does not modify the isChecked property.
|
| 65 | */
|
| 66 | isIndeterminate?: boolean;
|
| 67 | /**
|
| 68 | * The children is the label to be displayed to the right of the checkbox.
|
| 69 | */
|
| 70 | children?: React.ReactNode;
|
| 71 | }
|
| 72 |
|
| 73 | export type CheckboxProps = ICheckbox &
|
| 74 | React.RefAttributes<HTMLInputElement> &
|
| 75 | Omit<BoxProps, "onChange" | "defaultChecked">;
|
| 76 |
|
| 77 | declare const Checkbox: React.FC<CheckboxProps>;
|
| 78 |
|
| 79 | export default Checkbox;
|