Checkbox

A component for capturing binary choices from the user.

Usage

Basic Checkbox

Render a basic Checkbox.

<Checkbox label="I agree to the terms and conditions" />

Color & Radius

Adjust the appearance of the checkbox using the color and radius props.

<Checkbox label="Subscribe to the newsletter" color="grass" radius="full" />

Sizes

Render checkboxes of different sizes.

<Flex direction="column">
  <Checkbox label="Small Checkbox" size="small" />
  <Checkbox label="Medium Checkbox" size="medium" />
  <Checkbox label="Large Checkbox" size="large" />
</Flex>

Disabled Checkbox

Prevent interactions with a disabled checkbox.

<Checkbox label="Disabled Checkbox" disabled={true} />

Checkbox with Errors

Display errors based on checkbox state and validation rules.

<Checkbox label="Required Checkbox" required={true} hasSubmitted={true} />

Custom Color

You can also customize the checkbox's appearance with a specific color.

<Checkbox label="Custom Color Checkbox" color="red" />

API

Props

Prop	Type	Default	Required
onChange	Function	-	-
label	ReactNode	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-