React Checkbox Pro 1.0.0

Back

React Checkbox Pro 1.0.0: A Comprehensive Checkbox Solution

We're excited to announce the initial release of React Checkbox Pro, a powerful and flexible checkbox component library for React applications. This release brings a comprehensive set of features designed to make working with checkboxes in React both enjoyable and efficient.

Key Features

1. Core Components

  • Checkbox Component: A fully accessible checkbox with support for custom styles and states
  • CheckboxGroup: Manage multiple checkboxes with ease
  • useCheckbox Hook: Custom hook for advanced checkbox control
import { Checkbox } from 'react-checkbox-pro'
 
// Basic Usage
<Checkbox>Basic Checkbox</Checkbox>
 
// With CheckboxGroup
<CheckboxGroup>
  <Checkbox value="option1">Option 1</Checkbox>
  <Checkbox value="option2">Option 2</Checkbox>
  <Checkbox value="option3">Option 3</Checkbox>
</CheckboxGroup>

2. Styling Options

  • Multiple color variants: default, primary, secondary, success, warning, danger
  • Size variants: xs, sm, md, lg
  • Flexible label placement: left, right, top, bottom
  • Full Tailwind CSS integration
// Color Variants
<Checkbox color="primary">Primary Checkbox</Checkbox>
<Checkbox color="secondary">Secondary Checkbox</Checkbox>
 
// Size Variants
<Checkbox size="sm">Small Checkbox</Checkbox>
<Checkbox size="lg">Large Checkbox</Checkbox>

3. Advanced Features

  • Indeterminate state support
  • Custom icon support
  • Keyboard shortcuts
  • Form integration
  • Error states and helper text
// Indeterminate State
<Checkbox indeterminate>Parent Checkbox</Checkbox>
 
// With Helper Text
<Checkbox helperText="This is a helper text">
  Checkbox with Helper
</Checkbox>

Accessibility First

React Checkbox Pro is built with accessibility in mind, following WAI-ARIA guidelines:

  • Full keyboard navigation support
  • Screen reader friendly
  • ARIA attributes automatically handled
  • Focus management

Getting Started

# Install using npm
npm install react-checkbox-pro
 
# or using pnpm
pnpm add react-checkbox-pro
 
# or using bun
bun add react-checkbox-pro

What's Next?

This is just the beginning! We have exciting plans for future releases, including:

  • More customization options
  • Additional variants
  • Enhanced form library integrations
  • Performance optimizations

For detailed documentation and examples, visit our documentation site.

We're looking forward to seeing what you build with React Checkbox Pro! Feel free to contribute, report issues, or suggest features on our GitHub repository.

Written by

shakibdshy

At

Fri Jan 03 2025