Checkbox

Usage

Example

import Checkbox from '@mavvy/m3-ui/Checkbox';
import Text from '@mavvy/m3-ui/Text';

...

const [checked, setChecked] = useState(false);

const handleChange = () => {
    setChecked((value) => !value);
}

<Checkbox 
  label="Default"
  checked={checked}
  onChange={handleChange} />

<Checkbox 
  label="Primary"
  checked={checked}
  onChange={handleChange}
  color="primary" />

<Checkbox
    label="Indeterminate"
    checked={checked}
    onChange={handleChange}
    color="primary"
    indeterminate
/>

<Checkbox
    label="Disabled"
    checked={checked}
    onChange={handleChange}
    color="primary"
    disabled
/>

<Checkbox
    label="Error"
    checked={checked}
    onChange={handleChange}
    color="primary"
    error
/>

<Checkbox
    label="Disabled Error"
    checked={checked}
    onChange={handleChange}
    color="primary"
    error
    disabled
/>

Default

Primary

Indeterminate

Disabled

Error

Disabled Error

Props

prop	type	description
color	Color	component color
checked	boolean	required. if true, shows a checked state
onChange	(checked: boolean) => void	required. handler for change event
label	string?	checkbox label
textComponent	string?	text component to render
textClassName	string?	text className
className	string?	className of the component
iconClassName	string?	className for the icon
name	string?	name attribute for the input element
disabled	boolean?	disables the checkbox
error	boolean?	if true, shows an error state
indeterminate	boolean?	if true, shows an indeterminate state