Checkbox

A Checkbox is a customizable control that supports three states: checked, unchecked, and indeterminate. It can be used in forms or as a standalone control.

Usage

import { Checkbox } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [checked, setChecked] = useState(false);
  return <Checkbox checked={checked} onChange={(event) => setChecked(event.target.checked)} />;
}

Props

Also accepts every standard <input> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

checked

Typeboolean

Whether the checkbox is checked

indeterminate

Typeboolean

Whether the checkbox is in an indeterminate state

size

TypeSelectorSize

Default'medium'

The size of the checkbox

CSS variables

Color

--wb-public-checkbox-border-color

--wb-public-checkbox-bg

--wb-public-checkbox-icon-color

--wb-public-checkbox-checked-bg

--wb-public-checkbox-focus-border-color

--wb-public-checkbox-focus-border-shadow

--wb-public-checkbox-disabled-bg

--wb-public-checkbox-disabled-border-color

--wb-public-checkbox-disabled-icon-color

Size

--wb-public-checkbox-size-medium

--wb-public-checkbox-size-small

--wb-public-checkbox-size-extra-small

--wb-public-checkbox-icon-size-medium

--wb-public-checkbox-icon-size-small

--wb-public-checkbox-icon-size-extra-small

--wb-public-checkbox-border-radius-medium

--wb-public-checkbox-border-radius-small

--wb-public-checkbox-border-radius-extra-small

--wb-public-checkbox-border-width