npm package: @licuido-ui/ui_checkbox
Description: Checkboxes allow the user to select one or more items from a set.
Latest version: 4.0.2

# CheckBox

Checkboxes allow the user to select one or more items from a set.

Checkboxes can be used to turn an option on or off.

If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.


### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link CheckBox ](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)
## Installation

```sh
npm i @licuido-ui/ui_checkbox
```

## Import component

```jsx
import { Checkbox } from '@licuido-ui/ui_checkbox';
```

## Usage

```jsx
<Checkbox checked={true} />
```


## Image

![alt text](./checkBox.png)

## Sample Code
```jsx
<Checkbox 
    id={''}
    checked={false}
    className={''}
    sx={{}}
    name={''}
    label={null}
    indeterminate={false}
    onChange={console.log}
    checkBoxStyle={{}}
    startIcon={}
/>

```

## Props

| **Name**                                                                         | **Description**                                                                                                                                                                                                                                                                                                                                                       | **Default**     | **Control**             |
| -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------- |
| className                                                                        | string                                                                                                                                                                                                                                                                                                                                                                | ""              |
| sx                                                                               | The system prop that allows defining system overrides as well as additional CSS styles\.SxProps&lt;Theme&gt;                                                                                                                                                                                                                                                          | \{ \}           | RAWsx : \{\}            |
| name                                                                             | Name attribute of the input element\.string                                                                                                                                                                                                                                                                                                                           | ""              |
| checked                                                                          | If true, the component is checked\.boolean                                                                                                                                                                                                                                                                                                                            | false           | False `or` True         |
| indeterminate                                                                    | If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers\.                                                                                                                                                                                                              |
| However, we set a data\-indeterminate attribute on the input\.boolean            | false                                                                                                                                                                                                                                                                                                                                                                 | False `or` True |
| onChange                                                                         | Callback fired when the state is changed                                                                                                                                                                                                                                                                                                                              | Function        | \-                      |
| checkBoxStyle                                                                    | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                                                                                   | \{ \}           | RAWcheckBoxStyle : \{\} |
| action                                                                           | A ref for imperative actions\.                                                                                                                                                                                                                                                                                                                                        |
| It currently only supports focusVisible\(\) action\.Ref&lt;ButtonBaseActions&gt; | \-                                                                                                                                                                                                                                                                                                                                                                    | Set object      |
| centerRipple                                                                     | If true, the ripples are centered\.                                                                                                                                                                                                                                                                                                                                   |
| They won't start at the cursor interaction position\.boolean                     | false                                                                                                                                                                                                                                                                                                                                                                 | Set boolean     |
| disableTouchRipple                                                               | If true, the touch ripple effect is disabled\.boolean                                                                                                                                                                                                                                                                                                                 | false           | Set boolean             |
| focusRipple                                                                      | If true, the base button will have a keyboard focus ripple\.boolean                                                                                                                                                                                                                                                                                                   | false           | Set boolean             |
| focusVisibleClassName                                                            | This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction It's a polyfill for the CSS :focus\-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus\-visible class to other components if needed\.string | \-              | Set string              |
| LinkComponent                                                                    | The component used to render a link when the href prop is provided\.ElementType&lt;any&gt;                                                                                                                                                                                                                                                                            | 'a'             | Set object              |
| onFocusVisible                                                                   | Callback fired when the component is focused with a keyboard\.                                                                                                                                                                                                                                                                                                        |
| We trigger a onFocus callback too\.FocusEventHandler&lt;any&gt;                  | \-                                                                                                                                                                                                                                                                                                                                                                    | Function        |
| TouchRippleProps                                                                 | Props applied to the TouchRipple element\.Partial&lt;TouchRippleProps&gt;                                                                                                                                                                                                                                                                                             | \-              | Set object              |
| touchRippleRef                                                                   | A ref that points to the TouchRipple element\.Ref&lt;TouchRippleActions&gt;                                                                                                                                                                                                                                                                                           | \-              | Set object              |