OOratiq98/98 ready

Getting started

Overview Introduction Installation CLI Theming Dark mode

Foundations

Colors Typography Spacing Radius Elevation Motion Icons Direction

Form

Button Button Group Label Field Input Input Group Input OTP Textarea Checkbox Radio Group Switch Toggle Toggle Group Slider Native Select Select Combobox Calendar Date Picker Multi Select Rating Tag Input Social Buttons Color Picker File Uploader Rich Text Editor

Display

Typography Badge Avatar Card Separator Skeleton Spinner Progress Kbd Empty Item Alert Aspect Ratio Marker Attachment Featured Icon Metric Code Snippet QR Code Video Player

Overlay

Dialog Alert Dialog Sheet Drawer Popover Tooltip Hover Card Dropdown Menu Context Menu Menubar Command Toast

Navigation & layout

Accordion Collapsible Tabs Breadcrumb Pagination Navigation Menu Sidebar Resizable Scroll Area Carousel

Data

Table Data Table Chart

App patterns

Page Header Section Header Filter Bar Activity Feed Progress Steps Tree View Notifications

Messaging

Bubble Message Message Scroller

Marketing blocks

Banner Header Navigation Hero Section Header Section Features Section Metrics Section Social Proof Testimonial Section Pricing Section FAQ Section CTA Section Newsletter CTA Blog Section Team Section Careers Section Contact Section Footer

Checkbox

Ready

Binary or indeterminate choice.

Requires radix-ui

I accept the terms and conditions

Installation

$ npx @oratiq-js/ui add checkbox

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Checkbox } from "@/components/ui/checkbox";

States

unchecked

checked

indeterminate

disabled

Sizes

With a label

Wrap in a Field, or pair with Label directly.

I accept the terms and conditions

Parent / child

An indeterminate parent reflects a partial selection.

Select all

Workouts

Nutrition

View source on GitHub → components/ui/checkbox.tsx