Checkbox

Preview

The Checkbox component is built with React Aria and styled using StyleX.

Import

import { Checkbox } from '@moul-dev/ui';

Usage

Here is a basic example of how to use the Checkbox component:

import { Checkbox } from '@moul-dev/ui';

export default function Example() {
  return (
    <Checkbox>
      Checkbox Label
    </Checkbox>
  );
}

Variants

The Checkbox component supports three visual variants: primary (default), secondary, and tertiary.

Primary Variant

The primary variant uses the primary accent brand colors, suited for main user actions.

<Checkbox variant="primary" defaultSelected>Primary</Checkbox>

Secondary Variant

The secondary variant uses monochrome neutral styling, providing a clean alternative for lists and tables.

<Checkbox variant="secondary" defaultSelected>Secondary</Checkbox>

Tertiary Variant

The tertiary variant is a hollow outline checkbox style that stays transparent and applies primary colors to the border and checkmark itself.

<Checkbox variant="tertiary" defaultSelected>Tertiary</Checkbox>

Props

Checkbox Props

Default className: react-aria-Checkbox