Components — Modern React UI Library

Examples

Checkbox as Task Item

Demonstrates a task list where checkboxes have a strikethrough effect when checked.

"use client";
import { Checkbox, TaskList } from "@g4rcez/components";

function TaskCheckboxes() {
  return (
    <TaskList>
      <ul className="flex flex-col flex-wrap gap-2">
        <li>
          <Checkbox asTask>Task 1</Checkbox>
        </li>
        <li>
          <Checkbox asTask>Task two</Checkbox>
        </li>
        <li>
          <Checkbox asTask>Another task</Checkbox>
        </li>
        <li>
          <Checkbox asTask>Coding</Checkbox>
        </li>
        <li>
          <Checkbox asTask>Drink coffee</Checkbox>
        </li>
        <li>
          <Checkbox asTask>Finish</Checkbox>
        </li>
      </ul>
    </TaskList>
  );
}

When to use Checkbox

Use when

You need the documented Checkbox interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Checkbox behavior you need.

Accessibility

Keep the Checkbox labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.