A clickable element that can be used to get a true or false value.

The Checkbox component is a very basic component that can be parametrized by its size, tone, shadow and other properties.

import { Checkbox } from '@rewind-ui/core';

function App() {
  return (
    <Checkbox label="Click me!" />


Import the Checkbox component using the following import statement.

import { Checkbox } from '@rewind-ui/core';

Tones & Colors

The following tones are supported: solid and light.

The only difference between the above tones is the unchecked state. The solid tone has a white background and the light tone has a light gray background.

The available color values are: white, blue, red, green, yellow, purple, gray, dark and black.


  <Checkbox label="Unchecked" defaultChecked={false} />
  <Checkbox label="Blue" color="blue" defaultChecked={true} />
  <Checkbox label="Red" color="red" defaultChecked={true} />
  <Checkbox label="Green" color="green" defaultChecked={true} />
  <Checkbox label="Yellow" color="yellow" defaultChecked={true} />
  <Checkbox label="Purple" color="purple" defaultChecked={true} />
  <Checkbox label="Gray" color="gray" defaultChecked={true} />
  <Checkbox label="Dark" color="dark" defaultChecked={true} />
  <Checkbox label="Black" color="black" defaultChecked={true} />


  <Checkbox tone="light" label="Unchecked" defaultChecked={false} />
  <Checkbox tone="light" label="Blue" color="blue" defaultChecked={true} />
  <Checkbox tone="light" label="Red" color="red" defaultChecked={true} />
  <Checkbox tone="light" label="Green" color="green" defaultChecked={true} />
  <Checkbox tone="light" label="Yellow" color="yellow" defaultChecked={true} />
  <Checkbox tone="light" label="Purple" color="purple" defaultChecked={true} />
  <Checkbox tone="light" label="Gray" color="gray" defaultChecked={true} />
  <Checkbox tone="light" label="Dark" color="dark" defaultChecked={true} />
  <Checkbox tone="light" label="Black" color="black" defaultChecked={true} />


Available size values are: sm, md, lg and xl.

  <Checkbox label="Small" size="sm" defaultChecked={true} />
  <Checkbox label="Medium" size="md" defaultChecked={true} />
  <Checkbox label="Large" size="lg" defaultChecked={true} />
  <Checkbox label="Extra large" size="xl" defaultChecked={true} />


Available radius values are: none, sm, md, lg and full.

  <Checkbox label="None" radius="none" defaultChecked={true} />
  <Checkbox label="Small" radius="sm" defaultChecked={true} />
  <Checkbox label="Medium" radius="md" defaultChecked={true} />
  <Checkbox label="Large" radius="lg" defaultChecked={true} />
  <Checkbox label="Full" radius="full" defaultChecked={true} />


Checkbox component supports disabled and error states. The error state is enabled automatically by passing an error message to the error prop.

Something went wrong...
  <Checkbox label="Disabled" disabled />
  <Checkbox label="Click me!" error="Something went wrong..." />


The description prop can be used to display a description below the checkbox.

This is a description
  <Checkbox label="Click me!" description="This is a description" />

Furthermore, a ReactNode can be passed to the description prop to display a more complex description that may contain multiple jsx elements.

This is a purple description
    label="Click me!"
    description={<span className="text-purple-500 bg-purple-50 p-1 rounded">This is a purple description</span>}

Similar styling can be achieved by using the descriptionClassName prop.

This is a pink description
    label="Click me!"
    descriptionClassName="text-pink-500 bg-pink-50 p-1 rounded"
    description="This is a pink description"


You can add a ring to the Checkbox by setting the withRing prop to true.

  <Checkbox label="Click me!" withRing={true} />
  <Checkbox label="Click me!" withRing={false} />

API Reference


colorCheckboxColorSets the colordark
disabledbooleanDisables the checkboxfalse
descriptionstring or ReactNodeDescription contentundefined
descriptionClassNamestringDescription span element classesundefined
errorstring or ReactNodeError contentundefined
errorClassNamestringError span element classesundefined
labelstring or ReactNodeLabel contentundefined
labelClassNamestringLabel element classesundefined
radiusCheckboxRadiusSets the border radiusnormal
sizeCheckboxSizeSets the checkbox sizebase
toneCheckboxToneSets the color tonesolid
withRingbooleanShows a ring around the checkbox on active statetrue


type CheckboxColor =
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';
type CheckboxRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl';
type CheckboxTone = 'solid' | 'light';


The Checkbox component adheres to the WAI-ARIA Checkbox Pattern.