saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Checkbox

Checkbox

A control that allows the user to toggle between checked and not checked.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />

Examples

With Text

Loading...
A checkbox with accompanying text and description.

Disabled

Loading...
A disabled checkbox that cannot be interacted with.

With Label

Loading...
Using the Label component for better accessibility.

Circle

Loading...
A circular checkbox variant with three distinct states: empty (has a plus-shaped field with border), filled (circle filled with theme color and contains white checkmark), and disabled (circle like a dot-indicator content).

Select All

Loading...
A checkbox list with a select all option that shows indeterminate state when some items are selected.

API Reference

PropTypeDefaultDescription
checkedboolean | 'indeterminate'—The controlled checked state.
defaultCheckedboolean—The default checked state.
onCheckedChange(checked: boolean) => void—Event handler for state changes.
disabledbooleanfalseDisables the checkbox.

On This Page

  • Installation
  • Usage
  • Examples
  • With Text
  • Disabled
  • With Label
  • Circle
  • Select All
  • API Reference

You agree to our Terms of Service and Privacy Policy.