Checkbox

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.

Source code

Theme

Click me!

Tone

Color

Size

Radius

Disabled

Error

Description

With ring

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

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

Import

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.

Solid

<View>
  <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} />
</View>

Light

<View>
  <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} />
</View>

Sizes

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

Small

Medium

Large

Extra large

<View>
  <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} />
</View>

Radiuses

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

<View>
  <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} />
</View>

States

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

Disabled

Click me!Something went wrong...

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

Description

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

Click me!This is a description

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

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

Click me!This is a purple description

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

Similar styling can be achieved by using the descriptionClassName prop.

Click me!This is a pink description

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

Ring

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

Click me!

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

API Reference

Properties

Prop	Type	Description	Default
color	`CheckboxColor`	Sets the color	`dark`
disabled	`boolean`	Disables the checkbox	`false`
description	`string` or `ReactNode`	Description content	`undefined`
descriptionClassName	`string`	Description span element classes	`undefined`
error	`string` or `ReactNode`	Error content	`undefined`
errorClassName	`string`	Error span element classes	`undefined`
label	`string` or `ReactNode`	Label content	`undefined`
labelClassName	`string`	Label element classes	`undefined`
radius	`CheckboxRadius`	Sets the border radius	`normal`
size	`CheckboxSize`	Sets the checkbox size	`base`
tone	`CheckboxTone`	Sets the color tone	`solid`
withRing	`boolean`	Shows a ring around the checkbox on active state	`true`

Types

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';

Accessibility

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

Button Combobox