Checkbox Component

Import

import { Checkbox } from 'rohit-ui';

Examples

Basic Checkbox

Unchecked

Checked

// Basic unchecked checkbox
<Checkbox label="Unchecked" />

Disabled Checkbox

Disabled Unchecked

Disabled Checked

// Disabled unchecked checkbox
<Checkbox label="Disabled" disabled />

Checkbox with onChange Handler

Subscribe to newsletter

// Controlled checkbox with state
const [checked, setChecked] = useState(true);

<Checkbox 
  label="Controlled"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

Indeterminate Checkbox

Indeterminate

// Indeterminate checkbox
<Checkbox label="Indeterminate" indeterminate />

Rohit Mode Checkbox

Unnecessarily Complicated

// Rohit Mode checkbox
<Checkbox label="Unnecessarily Complicated" checked rohitMode />

Note: In actual Rohit Mode, the checkbox will wiggle randomly, change state unexpectedly, and occasionally refuse to be unchecked.

Props

Name	Type	Default	Description
label	string	-	Label text displayed next to the checkbox
checked	boolean	false	Whether the checkbox is checked
indeterminate	boolean	false	Sets the checkbox to an indeterminate state
disabled	boolean	false	Disables the checkbox, preventing interactions
name	string	-	Name attribute of the checkbox input
id	string	auto-generated	ID attribute of the checkbox input
onChange	function	-	Function called when the checkbox state changes
labelPosition	'left' \| 'right'	'right'	Position of the label relative to the checkbox
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Checkbox component using styled-components:

import styled from 'styled-components';
import { Checkbox } from 'rohit-ui';

const CustomCheckbox = styled(Checkbox)`
  .checkbox-input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--win98-navy);
    border-radius: 3px;
    margin-right: 8px;
    position: relative;
    
    &:checked {
      background: var(--win98-navy);
      
      &::after {
        content: '✓';
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
      }
    }
  }
  
  .checkbox-label {
    font-family: 'Comic Sans MS', sans-serif;
    color: var(--win98-navy);
    font-size: 1.1em;
  }
`;

function MyComponent() {
  return (
    <CustomCheckbox
      label="Custom Checkbox"
      checked={checked}
      onChange={setChecked}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Checkbox component will:

Wiggle randomly, especially when hovered
Sometimes change its state unexpectedly
Occasionally refuse to be unchecked (because Rohit always wants you to opt in)
Display a comically complex animation when changing state
Sometimes require multiple clicks to change state