Overview

The checkbox component is used in forms when a user needs to select multiple values from several options.

Properties

Properties	Description
name	The name of the checkbox. Submitted with its owning form as part of a name/value pair.
value	The value given as data when submitted with a name.
defaultChecked	The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
required	When true, indicates that the user must check the checkbox before the owning form can be submitted.
disabled	When true, prevents the user from interacting with the checkbox.
checked	The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
onCheckedChange	Event handler called when the checked state of the checkbox changes.
size	Options for the size of the checkbox
children	The Children prop allows users to pass other components as a property, enabling users to compose together components.
className	The className property can be used to add a CSS class to a component that accepts styling. In Clutch, the className property powers the visual styling panel and the class name itself is auto-generated. Additional class names can be passed to the component by twirling open the className control and passing in strings.
ref	The ref property allows users to attach React refs to the component. Learn more about refs in React here
style	The style property accepts a CSS JavaScript object with camelCased properties rather than a CSS string. Using the style attribute as the primary means of styling elements is generally not recommended. The style is most often used in React applications to add dynamically-computed styles at render time. Learn more about the style property here.
invalid	If true, the checkbox is marked as invalid. Changes style of unchecked state.