Hero Ui

Checkbox

Forms 16

About

A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox to your project and fits it to your theme.

Code

How Checkbox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function DefaultDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <Checkbox id="basic-terms">Accept terms and conditions</Checkbox>
    </div>
  );
}

export { DefaultDemo };

More by Hero Ui

View all
  • DatePicker

    DatePicker

    465
  • Chip

    Chip

    441
  •  The Pagination

    The Pagination

    361
  • HeroUI Color Picker

    HeroUI Color Picker

    106
  • Skeleton

    Skeleton

    105
  • HeroUI Table

    HeroUI Table

    102
  • HeroUI Disclosure Group

    HeroUI Disclosure Group

    94
  • HeroUI AlertDialog

    HeroUI AlertDialog

    80

More in Forms

View all
  • Premium Auth

    Premium Auth

    517
  • Contact Card

    Contact Card

    1K
  • Book A Demo 1

    Book A Demo 1

    71
  • Authentication Card

    Authentication Card

    48
  • Login 1

    Login 1

    52
  • Form

    Form

    16
  • Login Card

    Login Card

    6
  • Modern & Stunning sign in

    Modern & Stunning sign in

    1.6K