React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreCheckboxGroup

Checkbox input component with label and custom styling

Interactive Playground

Customize the checkbox properties and see the changes in real-time

Unchecked

States

Different checkbox states

Unchecked

Checked

Error State

Disabled (Unchecked)

Disabled (Checked)

Multiple Checkboxes

Example of using multiple checkboxes together

Select your interests:

Selected: None

Common Use Cases

Typical checkbox implementations

Terms & Conditions

Newsletter Subscription

Remember Me

Privacy Settings

API Reference

Props

id

string - Unique identifier for the checkbox

label

React.ReactNode - Label text for the checkbox

checked

boolean - Whether the checkbox is checked

onChange

(e: ChangeEvent<HTMLInputElement>) => void - Change handler

value

string | number | readonly string[] - The checkbox value

name

string - Name attribute for form submission

disabled

boolean - Disables the checkbox

error

boolean - Shows error state styling

className

string - Additional CSS classes

children

React.ReactNode - Additional content after the label