Checkbox Button Group

Usage

Select featuresChoose all that apply to your project

securityReal-time threat detection and prevention

storageCloud-based storage with automatic backups

analyticsUsage reports and performance dashboards

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Anatomy

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

import { CheckboxButtonGroup } from "@thenamespace/uikit";

<CheckboxButtonGroup>
  <CheckboxButtonGroup.Item>
    <CheckboxButtonGroup.ItemIcon />
    <CheckboxButtonGroup.ItemContent />
    <CheckboxButtonGroup.Indicator />
  </CheckboxButtonGroup.Item>
</CheckboxButtonGroup>;

Controlled

Add-onsSelect the add-ons you need

BackupsAutomated daily backups

$5.00/mo

Monitoring24/7 monitoring and alerts

$12.00/mo

SupportPriority email and chat support

$8.00/mo

Selected: backups

"use client";

import { useState } from "react";

import { CheckboxButtonGroup } from "@thenamespace/uikit";

Custom Indicator

Notification preferences

product updatesWeekly product updates and tips4,200 subscribers

security alertsSecurity alerts and maintenance notices8,100 subscribers

marketingPromotions, deals, and special offers2,300 subscribers

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Disabled Group

Select featuresFeature selection is temporarily unavailable.

securityReal-time threat detection and prevention

storageCloud-based storage with automatic backups

analyticsUsage reports and performance dashboards

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Grid Layout

Add-ons

BackupsAutomated daily backups

$5.00/mo

Monitoring24/7 monitoring and alerts

$12.00/mo

SupportPriority email and chat support

$8.00/mo

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Icon Cards

Security features

2FARecommended

Two-factor authentication for all user accounts.

Encryption

Encrypt data at rest and in transit.

Cloud Backup

Automated daily backups to secure cloud storage.

Alert System

Real-time alerts for incidents and breaches.

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Chip } from "@thenamespace/uikit/chip";
import { Description } from "@thenamespace/uikit/description";

No Indicator

Select features

securityReal-time threat detection and prevention

storageCloud-based storage with automatic backups

analyticsUsage reports and performance dashboards

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Render Prop Children

Select features

BackupsAutomated daily backups$5/mo

Monitoring24/7 monitoring and alerts$12/mo

SupportPriority email and chat support$8/mo

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Subscription Plans

Choose a subscription

Pick a plan. Try a month on us!

GoldFull suite of saving, investing, and learning tools for you and your family.

$0.40/day ($12 billed monthly)

SilverLevel up your saving and investing skills with even more tools.

$0.20/day ($6 billed monthly)

BronzeInvesting tools to get you started on your financial journey.

$0.10/day ($3 billed monthly)

*APY is variable and subject to change at our discretion, without prior notice.

Compare plans

"use client";

import type { CSSProperties } from "react";

import { CheckboxButtonGroup } from "@thenamespace/uikit";

With Icons

Role permissions

Content ManagementCreate, edit, and delete content

User AdministrationManage team members and roles

Analytics AccessView and export reports

SettingsConfigure system preferences

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

With Ripple

Integrations

GitHubConnect your GitHub integration

SlackConnect your Slack integration

LinearConnect your Linear integration

"use client";

import { CheckboxButtonGroup } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

CSS Classes

Base Classes

.checkbox-button-group - Base CheckboxGroup container with flex layout

Layout Classes

.checkbox-button-group--grid - Grid layout mode

Element Classes

.checkbox-button-group__item - Card-like checkbox button with border and selection ring
.checkbox-button-group__indicator - Positioned top-right indicator (checkbox control or custom icon)
.checkbox-button-group__item-content - Text/content area wrapping Checkbox.Content
.checkbox-button-group__item-icon - Leading icon container

Interactive States

Selected: [data-selected="true"] on .checkbox-button-group__item (accent ring)
Focus visible: :focus-visible or [data-focus-visible="true"] on .checkbox-button-group__item (focus ring)
Disabled: :disabled or [aria-disabled="true"] on .checkbox-button-group__item (reduced opacity)

CSS Variables

--checkbox-button-group-item-radius - Border radius of items (default: var(--radius-2xl))

API Reference

CheckboxButtonGroup

The root component. Wraps Namespace UIKit CheckboxGroup with card-style layout.

Prop	Type	Default	Description
`layout`	`'flex' \| 'grid'`	`'flex'`	Layout mode for items

Also supports all Namespace UIKit CheckboxGroup props.

CheckboxButtonGroup.Item

A selectable card wrapping Namespace UIKit Checkbox. Supports render prop children for accessing selection state.

Also supports all Namespace UIKit Checkbox props.

CheckboxButtonGroup.Indicator

Selection indicator positioned at the top-right of the item.

No children: renders the default Namespace UIKit checkbox (Control + Indicator)
With children: renders a custom icon that appears only when selected

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom indicator icon (shown when selected)

Also supports all native span HTML attributes.

CheckboxButtonGroup.ItemContent

Content area for title and description text. Wraps Namespace UIKit Checkbox.Content.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content elements

Also supports all native div HTML attributes.

CheckboxButtonGroup.ItemIcon

Leading icon container.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Icon element

Also supports all native div HTML attributes.