Examples

Default

Accept terms and conditions

Checked

Receive email updates

Disabled

Disabled uncheckedDisabled checked

Group

Multiple checkboxes forming a selection group.

NotificationsEmail notificationsPush notificationsWeekly digestMarketing emails

Card Selection

Checkboxes styled as selectable cards.

StarterProTeamEnterprise

With Description

Checkbox with label and supporting description text.

Marketing emails

Receive emails about new products and features.

Security alerts

Get notified about unusual account activity.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Checkbox } from "@rokle/components";

import { Checkbox } from "@rokle/components";

export function Example() {
  return (
    <div className="flex flex-col gap-3">
      <label className="flex items-center gap-2">
        <Checkbox /> Accept terms and conditions
      </label>
      <label className="flex items-center gap-2">
        <Checkbox defaultChecked /> Receive email updates
      </label>
      <label className="flex items-center gap-2">
        <Checkbox disabled /> Disabled option
      </label>
    </div>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
checked	boolean	false	Checked state.
disabled	boolean	false	Disable interaction.