CheckboxGroup

Import

import {
  CheckboxGroup,
  Checkbox,
  Label,
  Description,
} from "@thenamespace/uikit";

Usage

Select your interestsChoose all that apply

CodingLove building software

DesignEnjoy creating beautiful interfaces

WritingPassionate about content creation

import {Checkbox, CheckboxGroup, Description, Label} from "@thenamespace/uikit";

export function Basic() {
  return (
    <CheckboxGroup name="interests">

Anatomy

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

import {
  CheckboxGroup,
  Checkbox,
  Label,
  Description,
  FieldError,
} from "@thenamespace/uikit";

export default () => (
  <CheckboxGroup name="interests">
    <Label />
    <Description /> {/* Optional */}
    <Checkbox value="option1">
      <Checkbox.Content>
        <Checkbox.Control>
          <Checkbox.Indicator />
        </Checkbox.Control>
        Label {/* plain text — the clickable label */}
      </Checkbox.Content>
      <Description /> {/* Optional per-checkbox help text */}
    </Checkbox>
    <FieldError /> {/* Optional */}
  </CheckboxGroup>
);

In Surface

When used inside a Surface component, use variant="secondary" to apply the lower emphasis variant suitable for surface backgrounds.

Select your interestsChoose all that apply

CodingLove building software

DesignEnjoy creating beautiful interfaces

WritingPassionate about content creation

import {Checkbox, CheckboxGroup, Description, Label, Surface} from "@thenamespace/uikit";

export function OnSurface() {
  return (
    <Surface className="w-full rounded-3xl p-6">

With Custom Indicator

FeaturesSelect the features you want

Email notificationsReceive updates via email

NewsletterGet weekly newsletters

"use client";

import {Checkbox, CheckboxGroup, Description, Label} from "@thenamespace/uikit";

export function WithCustomIndicator() {

Indeterminate

Select all

Coding

Design

Writing

"use client";

import {Checkbox, CheckboxGroup} from "@thenamespace/uikit";
import {useState} from "react";

Controlled

Your skills

Coding

Design

Writing

Selected: coding, design

"use client";

import {Checkbox, CheckboxGroup, Label} from "@thenamespace/uikit";
import {useState} from "react";

Validation

"use client";

import {Button, Checkbox, CheckboxGroup, FieldError, Form, Label} from "@thenamespace/uikit";

export function Validation() {

Disabled

FeaturesFeature selection is temporarily disabled

Feature 1This feature is coming soon

Feature 2This feature is coming soon

import {Checkbox, CheckboxGroup, Description, Label} from "@thenamespace/uikit";

export function Disabled() {
  return (
    <CheckboxGroup isDisabled name="disabled-features">

Features and Add-ons Example

Notification preferencesChoose how you want to receive updates

Email NotificationsReceive updates via email

SMS AlertsGet instant SMS notifications

Push NotificationsBrowser and mobile push alerts

import {
  Checkbox,
  CheckboxGroup,
  Description,
  Label,

Custom Render Function

Select your interestsChoose all that apply

CodingLove building software

DesignEnjoy creating beautiful interfaces

WritingPassionate about content creation

"use client";

import {Checkbox, CheckboxGroup, Description, Label} from "@thenamespace/uikit";

export function CustomRenderFunction() {

Styling

Passing Tailwind CSS classes

You can customize the CheckboxGroup component:

import { CheckboxGroup, Checkbox, Label } from "@thenamespace/uikit";

function CustomCheckboxGroup() {
  return (
    <CheckboxGroup className="gap-4" name="custom">
      <Checkbox value="option1">
        <Checkbox.Content>
          <Checkbox.Control className="border-2 border-purple-500 data-[selected=true]:bg-purple-500">
            <Checkbox.Indicator className="text-white" />
          </Checkbox.Control>
          Option 1
        </Checkbox.Content>
      </Checkbox>
    </CheckboxGroup>
  );
}

Customizing the component classes

To customize the CheckboxGroup component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .checkbox-group {
    @apply flex flex-col gap-2;
  }
}

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

CSS Classes

The CheckboxGroup component uses these CSS classes:

.checkbox-group - Base checkbox group container

API Reference

CheckboxGroup Props

Inherits from React Aria CheckboxGroup.

Prop	Type	Default	Description
`value`	`string[]`	-	The current selected values (controlled)
`defaultValue`	`string[]`	-	The default selected values (uncontrolled)
`onChange`	`(value: string[]) => void`	-	Handler called when the selected values change
`isDisabled`	`boolean`	`false`	Whether the checkbox group is disabled
`isRequired`	`boolean`	`false`	Whether the checkbox group is required
`isReadOnly`	`boolean`	`false`	Whether the checkbox group is read only
`isInvalid`	`boolean`	`false`	Whether the checkbox group is in an invalid state
`name`	`string`	-	The name of the checkbox group, used when submitting an HTML form
`children`	`React.ReactNode \| (values: CheckboxGroupRenderProps) => React.ReactNode`	-	Checkbox group content or render prop
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, CheckboxGroupRenderProps>`	-	Overrides the default DOM element with a custom render function.

CheckboxGroupRenderProps

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

Prop	Type	Description
`value`	`string[]`	The currently selected values
`isDisabled`	`boolean`	Whether the checkbox group is disabled
`isReadOnly`	`boolean`	Whether the checkbox group is read only
`isInvalid`	`boolean`	Whether the checkbox group is in an invalid state
`isRequired`	`boolean`	Whether the checkbox group is required