Completeness: behavior-required

The stylesheet is only the visible half of this component. It also needs a keyboard map, focus managed across more than one element, ARIA attributes that point at other nodes, and [data-*] attributes that only running code sets — so a CSS-only port will not reproduce it. Use @blakeui/react, or read the interaction contract from the MCP server with get_component_behavior("Checkbox") and build the behaviour yourself.

Import

import { Checkbox, Label } from '@blakeui/react';

Usage

Accept terms and conditions

import {Checkbox, Label} from "@blakeui/react";

export function Basic() {
  return (
    <Checkbox id="basic-terms">

Anatomy

Import the Checkbox component and access all parts using dot notation.

import { Checkbox, Label, Description } from '@blakeui/react';

export default () => (
  <Checkbox>
    <Checkbox.Control>
      <Checkbox.Indicator />
    </Checkbox.Control>
    <Checkbox.Content>
      <Label />
      <Description /> {/* Optional */}
    </Checkbox.Content>
  </Checkbox>
);

Disabled

Premium FeatureThis feature is coming soon

import {Checkbox, Description, Label} from "@blakeui/react";

export function Disabled() {
  return (
    <Checkbox isDisabled id="feature">

Default Selected

Enable email notifications

import {Checkbox, Label} from "@blakeui/react";

export function DefaultSelected() {
  return (
    <Checkbox defaultSelected id="default-notifications">

Controlled

Email notifications

Status: Enabled

"use client";

import {Checkbox, Label} from "@blakeui/react";
import {useState} from "react";

Indeterminate

Select allShows indeterminate state (dash icon)

"use client";

import {Checkbox, Description, Label} from "@blakeui/react";
import {useState} from "react";

With Label

Send me marketing emails

import {Checkbox, Label} from "@blakeui/react";

export function WithLabel() {
  return (
    <Checkbox id="label-marketing">

With Description

Email notificationsGet notified when someone mentions you in a comment

import {Checkbox, Description, Label} from "@blakeui/react";

export function WithDescription() {
  return (
    <Checkbox id="description-notifications">

Render Props

Accept termsPlease read and accept the terms

"use client";

import {Checkbox, Description, Label} from "@blakeui/react";

export function RenderProps() {

Form Integration

"use client";

import {Button, Checkbox, Label} from "@blakeui/react";
import React from "react";

Invalid

I agree to the termsYou must accept the terms to continue

import {Checkbox, Description, Label} from "@blakeui/react";

export function Invalid() {
  return (
    <Checkbox isInvalid name="agreement">

Custom Indicator

Heart

Plus

Indeterminate

"use client";

import {Checkbox, Label} from "@blakeui/react";

export function CustomIndicator() {

Full Rounded

Rounded checkboxes

Small size

Default size

Large size

Extra large size

import {Checkbox, Label} from "@blakeui/react";

export function FullRounded() {
  return (
    <div className="flex flex-col gap-6">

Variants

The Checkbox component supports two visual variants:

primary (default) - Standard styling with default background, suitable for most use cases
secondary - Lower emphasis variant, suitable for use in Surface components

Primary variant

Primary checkboxStandard styling with default background

Secondary variant

Secondary checkboxLower emphasis variant for use in surfaces

import {Checkbox, Description, Label} from "@blakeui/react";

export function Variants() {
  return (
    <div className="flex flex-col gap-4">

Custom Render Function

Accept terms and conditions

"use client";

import {Checkbox, Label} from "@blakeui/react";

export function CustomRenderFunction() {

Related Components

Label

CheckboxGroup

Description

Styling

Passing Tailwind CSS classes

You can customize individual Checkbox components:

import { Checkbox, Label } from '@blakeui/react';

function CustomCheckbox() {
  return (
    <Checkbox name="custom">
      <Checkbox.Control className="border-2 border-purple-500 data-[selected=true]:bg-purple-500">
        <Checkbox.Indicator className="text-white" />
      </Checkbox.Control>
      <Checkbox.Content>
        <Label>Custom Checkbox</Label>
      </Checkbox.Content>
    </Checkbox>
  );
}

Customizing the component classes

To customize the Checkbox component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Checkbox component uses these CSS classes (View source styles):

.checkbox - Base checkbox container
.checkbox__control - Checkbox control box
.checkbox__indicator - Checkbox checkmark indicator
.checkbox__content - Optional content container

Interactive States

The checkbox supports both CSS pseudo-classes and data attributes for flexibility:

Selected: [data-selected="true"] or [aria-checked="true"] (shows checkmark and background color change)
Indeterminate: [data-indeterminate="true"] (shows indeterminate state with dash)
Invalid: [data-invalid="true"] or [aria-invalid="true"] (shows error state with danger colors)
Hover: :hover or [data-hovered="true"]
Focus: :focus-visible or [data-focus-visible="true"] (shows focus ring)
Disabled: :disabled or [aria-disabled="true"] (reduced opacity, no pointer events)
Pressed: :active or [data-pressed="true"]

API Reference

Checkbox Props

Inherits from React Aria Checkbox.

Prop	Type	Default	Description
`isSelected`	`boolean`	`false`	Whether the checkbox is checked
`defaultSelected`	`boolean`	`false`	Whether the checkbox is checked by default (uncontrolled)
`isIndeterminate`	`boolean`	`false`	Whether the checkbox is in an indeterminate state
`isDisabled`	`boolean`	`false`	Whether the checkbox is disabled
`isInvalid`	`boolean`	`false`	Whether the checkbox is invalid
`isReadOnly`	`boolean`	`false`	Whether the checkbox is read only
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual variant of the component. `primary` is the default style with shadow. `secondary` is a lower emphasis variant without shadow, suitable for use in surfaces.
`name`	`string`	-	The name of the input element, used when submitting an HTML form
`value`	`string`	-	The value of the input element, used when submitting an HTML form
`onChange`	`(isSelected: boolean) => void`	-	Handler called when the checkbox value changes
`children`	`React.ReactNode \| (values: CheckboxRenderProps) => React.ReactNode`	-	Checkbox content or render prop
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxRenderProps>`	-	Overrides the default DOM element with a custom render function.

CheckboxRenderProps

When using the render prop pattern, these values are provided:

Prop	Type	Description
`isSelected`	`boolean`	Whether the checkbox is currently checked
`isIndeterminate`	`boolean`	Whether the checkbox is in an indeterminate state
`isHovered`	`boolean`	Whether the checkbox is hovered
`isPressed`	`boolean`	Whether the checkbox is currently pressed
`isFocused`	`boolean`	Whether the checkbox is focused
`isFocusVisible`	`boolean`	Whether the checkbox is keyboard focused
`isDisabled`	`boolean`	Whether the checkbox is disabled
`isReadOnly`	`boolean`	Whether the checkbox is read only

Checkbox

Related Components

On this page

Related Components