Checkbox

A control that allows the user to toggle between checked and not checked. Built on Radix UI.

Installation

# Install @opencosmos/ui to use Checkbox
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

disabled— When true, prevents interaction

Usage

Import

import { Checkbox } from '@opencosmos/ui';

Example

<Checkbox>
  Content
</Checkbox>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
disabled	boolean	false	When true, prevents interaction

Examples

Default

Disabled

Code Examples

Terms and Conditions

Checkbox with a label

import { Checkbox, Label } from '@opencosmos/ui';

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>