Checkbox

Below is the full output of the Inpu component across all variants and sizes.

“Its Important to install the packages & Dependencies to use can intall using npm install zure-ui and also paste code maunally For both React & Next Js “

1. Variants

These define the intent and visual weight of the Checkbox.

Preview

default

outline

ghost

2. Sizes

We have provided 3 sizes sm , md & lg.

Preview

3. Example

Made an example for better understanding which showes ud the state of Checkbox.

Important Note : I have used tailwindcss you can use normal CSS

Preview

Mark as complete

Current State: ❌ Unchecked

Props

Prop	Type	Default	Description
`label`	`string`	—	Text displayed next to the checkbox.
`checked`	`boolean`	—	Controls whether the checkbox is checked (controlled component).
`onChange`	`(event) => void`	—	Callback fired when the checked state changes.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the size of the checkbox.
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	Visual style variant of the checkbox.
`disabled`	`boolean`	`false`	Disables the checkbox when set to `true`.
`error`	`boolean`	`false`	Displays error state styling when `true`.
`color`	`string`	`"#2563eb"`	Accent color of the checkbox when checked.
`className`	`string`	`""`	Additional CSS classes for custom styling.
`...props`	`object`	—	Any extra props passed to the native checkbox input element.

Installation

You can Integrate Zure UI By 2 ways npm install zure-ui Or by Manually creating folder , files & paste the given code It Totally depends on your workflow.

NPM

Step 1: Create a React App

Open your terminal and run the following command to create a new React app:


npx create-react-app my-app

Step 2: Navigate to Your Project Directory

After creating your project, navigate to your project directory:


cd my-app

Step 3: Install the Package

Run the following command in your project root to add the library as a dependency.


npm install zure-ui

Step 4: Start Building

You can now import any component directly into your React files.

Checkbox.jsx


 
import {Checkbox} from "zure-ui";
 
export default function App() {
 
return (
<Checkbox defaultChecked variant="default" size="md" label="default" color="#000"  />
<Checkbox defaultChecked variant="outline" size="md" label="outline" color="#000" />
<Checkbox defaultChecked variant="ghost" size="md" label="ghost" color="#000" />
);
}

Manual

Step 1: Create a Components Directory

Ensure you have a dedicated folder for UI components (e.g., src/components/ui).

Step 2: Create the Component Folder

For each component you want to use, create a new folder named after the component.

- - - - Checkbox.jsx
      - Checkbox.module.css
      - index.js
- App.js

Step 3: Add the Three Core Files

Inside that new folder, create these three files and paste the code provided in the component’s documentation:

Checkbox.jsx (The Logic)
Checkbox.module.css (The Styles)
index.js (The Export)

Step 4: Paste in Checkbox.jsx

React JS

Checkbox.jsx


import React, { useId } from "react";
import styles from "./checkbox.module.css";
 
export const Checkbox = ({
  label,
  checked,
  onChange,
  size = "md",
  variant = "default", // default | outline | ghost
  disabled = false,
  error = false,
  color = "#000", 
  className = "",
  ...props
}) => {
  const id = useId();
 
  return (
    <div 
      className={`${styles.container} ${className}`}
      style={{ "--zure-color": color }}
    >
      <label className={`${styles.wrapper} ${disabled ? styles.disabled : ""}`}>
        <div className={styles.inputWrapper}>
          <input
            id={id}
            type="checkbox"
            checked={checked}
            onChange={onChange}
            disabled={disabled}
            className={styles.input}
            {...props}
          />
          {/* The box that changes based on variant */}
          <div className={`${styles.checkmark} ${styles[variant]} ${styles[size]} ${error ? styles.error : ""}`}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </div>
        </div>
        
        {label && <span className={styles.label}>{label}</span>}
      </label>
    </div>
  );
};

Step 5: Paste in input.module.css

Input.module.css


.container {
--zure-color: #2563eb; /* Fallback */
--transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}
 
.wrapper {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
 
.inputWrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
 
/* Hidden native input, but still focusable */
.input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
z-index: 2;
}
 
.checkmark {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #d1d5db;
background-color: #fff;
border-radius: 6px;
transition: all var(--transition);
pointer-events: none; /* Let clicks pass through to the input */
}
 
.checkmark svg {
width: 75%;
height: 75%;
color: white;
opacity: 0;
transform: scale(0.5);
transition: transform var(--transition), opacity var(--transition);
}
 
/* --- STATE LOGIC --- */
 
/* 1. Default Variant Checked */
.input:checked + .default {
background-color: var(--zure-color);
border-color: var(--zure-color);
}
 
/* 2. Outline Variant Checked */
.input:checked + .outline {
border-color: var(--zure-color);
background-color: color-mix(in srgb, var(--zure-color), transparent 92%);
}
.input:checked + .outline svg {
color: var(--zure-color); /* Tick is colored instead of white */
}
 
/* 3. Ghost Variant Checked */
.input:checked + .ghost {
background-color: color-mix(in srgb, var(--zure-color), transparent 85%);
border-color: transparent;
}
.input:checked + .ghost svg {
color: var(--zure-color);
}
 
/* Common "Show SVG" logic */
.input:checked + .checkmark svg {
opacity: 1;
transform: scale(1);
}
 
/* Accessibility Focus */
.input:focus-visible + .checkmark {
outline: 2px solid var(--zure-color);
outline-offset: 2px;
}
 
/* --- SIZES --- */
.sm { width: 16px; height: 16px; border-radius: 4px; }
.md { width: 20px; height: 20px; }
.lg { width: 24px; height: 24px; border-radius: 8px; }
 
/* Error state */
.checkmark.error {
border-color: #ef4444;
}

Step 6: Paste in index.js

index.js


export { Checkbox } from "./Checkbox";

Step 7: Local Usage

Import the component using your local path:

Checkbox.jsx


import { Checkbox } from './components/Checkbox';

Step 8: Usage

Use the component

Checkbox.jsx


 
import {Checkbox} from "zure-ui";
 
export default function App() {
 
return (
<Checkbox defaultChecked variant="default" size="md" label="default" color="#000"  />
<Checkbox defaultChecked variant="outline" size="md" label="outline" color="#000" />
<Checkbox defaultChecked variant="ghost" size="md" label="ghost" color="#000" />
);
}

Checkbox

1. Variants

Preview

Use

2. Sizes

Preview

Use

3. Example

Preview

Use

Props

Installation

NPM

NPM

Step 1: Create a React App

Step 2: Navigate to Your Project Directory

Step 3: Install the Package

Step 4: Start Building

Manual

Manual

Step 1: Create a Components Directory

Step 2: Create the Component Folder

Step 3: Add the Three Core Files

Step 4: Paste in Checkbox.jsx

React JS

Next JS

Step 5: Paste in input.module.css

Step 6: Paste in index.js

Step 7: Local Usage

Step 8: Usage