Checkbox - Keep React

The Checkbox Component is a user interface element that allows users to toggle between two states, typically representing selection or deselection. It consists of a small box that can be checked (selected) or unchecked (deselected). Checkboxes are commonly used in forms, lists, and interactive interfaces to enable users to make multiple selections or indicate their preferences.

Default Checkbox#

The default checkbox is a square checkbox that can be checked or unchecked.

Keep Design System License

Single License

Team License

Checkbox Variant#

The Checkbox component offers three variants: rounded,circle and default. You can use the variant prop to specify the desired variant.

Checkbox Variant

Default

Rounded

Circle

API Reference#

Here is a list of the props that you can pass to the Checkbox component:

Property	Description	Type	Default
variant	Checkbox Variant	default rounded circle	default
color	Checkbox color	primary secondary success warning error	primary
defaultChecked	Checked state of the checkbox	boolean	false
checked	Checked state of the checkbox	function	false
onCheckedChange	Event handler called when the checked state of the checkbox changes.	function	(value)=>{}

Reference#

Our checkbox component is built using the @radix-ui/react-checkbox package. For more information , follow the documentation @radix-ui/react-checkbox.

Edit this page Divider