@licuido-ui/ui_checkbox NPM

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

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/ui_tree-view @licuido-ui/react

4.0.2

8 months ago