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 [email protected]

Link

Story Book Link CheckBox

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_checkbox

Import component

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

Usage

<Checkbox checked={true} />

Image

Sample Code

<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<Theme> | { } | 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<{}> | { } | RAWcheckBoxStyle : {} | | action | A ref for imperative actions. | | It currently only supports focusVisible() action.Ref<ButtonBaseActions> | - | 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<any> | 'a' | Set object | | onFocusVisible | Callback fired when the component is focused with a keyboard. | | We trigger a onFocus callback too.FocusEventHandler<any> | - | Function | | TouchRippleProps | Props applied to the TouchRipple element.Partial<TouchRippleProps> | - | Set object | | touchRippleRef | A ref that points to the TouchRipple element.Ref<TouchRippleActions> | - | Set object |