# CheckboxItem

## Description

Enhanced checkbox component with integrated label styling and an optional right-side action button. Extends the base Checkbox functionality with additional interactive elements for more complex use cases.

## Aliases

- Checkbox List Item
- Enhanced Checkbox
- Action Checkbox
- Checkbox with Button

## Props Breakdown

Inherits all props from [Checkbox](./Checkbox.md) plus:

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `showRightButton` | `boolean` | `false` | No | Whether to show an action button on the right side |
| `onRightButtonClick` | `() => void` | - | No | Callback function when the right button is clicked |
| `rightButtonIcon` | `ReactNode` | - | No | Custom icon for the right button |

### Inherited Props from Checkbox
- `children` - Label content for the checkbox
- `size` - Size variant ('Small', 'Medium', 'Large')
- `type` - Visual theme ('Default', 'Inverse')
- `checked`/`value` - Controlled state
- `onValueChange` - Change handler
- `disabled` - Disabled state
- `required` - Required field
- `invalid` - Invalid state
- All standard HTML input attributes

## Examples

### Basic Usage
```tsx
import { CheckboxItem } from '@delightui/components';

function BasicExample() {
  const [checked, setChecked] = useState(false);

  return (
    <CheckboxItem
      checked={checked}
      onValueChange={setChecked}
    >
      Enable notifications
    </CheckboxItem>
  );
}
```

### With Right Action Button
```tsx
import { CogIcon } from '@heroicons/react/24/outline';

function ActionButtonExample() {
  const [checked, setChecked] = useState(false);

  const handleSettings = () => {
    console.log('Opening notification settings');
  };

  return (
    <CheckboxItem
      checked={checked}
      onValueChange={setChecked}
      showRightButton={true}
      onRightButtonClick={handleSettings}
      rightButtonIcon={<CogIcon />}
    >
      Email notifications
    </CheckboxItem>
  );
}
```

### Settings List
```tsx
import { CogIcon, InfoIcon, BellIcon } from '@heroicons/react/24/outline';

function SettingsListExample() {
  const [settings, setSettings] = useState({
    notifications: true,
    marketing: false,
    updates: true
  });

  const updateSetting = (key, value) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  const openSettingsDetail = (settingKey) => {
    console.log(`Opening ${settingKey} settings`);
  };

  return (
    <div className="settings-list">
      <CheckboxItem
        checked={settings.notifications}
        onValueChange={(value) => updateSetting('notifications', value)}
        showRightButton={true}
        onRightButtonClick={() => openSettingsDetail('notifications')}
        rightButtonIcon={<CogIcon />}
      >
        Push Notifications
      </CheckboxItem>

      <CheckboxItem
        checked={settings.marketing}
        onValueChange={(value) => updateSetting('marketing', value)}
        showRightButton={true}
        onRightButtonClick={() => openSettingsDetail('marketing')}
        rightButtonIcon={<InfoIcon />}
      >
        Marketing Communications
      </CheckboxItem>

      <CheckboxItem
        checked={settings.updates}
        onValueChange={(value) => updateSetting('updates', value)}
        showRightButton={true}
        onRightButtonClick={() => openSettingsDetail('updates')}
        rightButtonIcon={<BellIcon />}
      >
        Product Updates
      </CheckboxItem>
    </div>
  );
}
```

### Different Sizes
```tsx
function SizesExample() {
  return (
    <div className="checkbox-item-sizes">
      <CheckboxItem 
        size="Small"
        showRightButton={true}
        rightButtonIcon={<CogIcon />}
      >
        Small checkbox item
      </CheckboxItem>

      <CheckboxItem 
        size="Medium"
        showRightButton={true}
        rightButtonIcon={<CogIcon />}
      >
        Medium checkbox item
      </CheckboxItem>

      <CheckboxItem 
        size="Large"
        showRightButton={true}
        rightButtonIcon={<CogIcon />}
      >
        Large checkbox item
      </CheckboxItem>
    </div>
  );
}
```

### Form Integration
```tsx
import { CheckboxItem, Form, FormField, Button } from '@delightui/components';

function FormExample() {
  const handleSubmit = (values, setError) => {
    console.log('Form submitted:', values);
  };

  const openPrivacySettings = () => {
    console.log('Opening privacy settings');
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormField name="terms" required>
        <CheckboxItem>
          I accept the terms and conditions
        </CheckboxItem>
      </FormField>

      <FormField name="privacy">
        <CheckboxItem
          showRightButton={true}
          onRightButtonClick={openPrivacySettings}
          rightButtonIcon={<CogIcon />}
        >
          Configure privacy settings
        </CheckboxItem>
      </FormField>

      <FormField name="newsletter">
        <CheckboxItem>
          Subscribe to newsletter
        </CheckboxItem>
      </FormField>

      <Button actionType="submit">
        Create Account
      </Button>
    </Form>
  );
}
```

### Permission Management
```tsx
import { 
  EyeIcon, 
  PencilIcon, 
  TrashIcon, 
  CogIcon 
} from '@heroicons/react/24/outline';

function PermissionExample() {
  const [permissions, setPermissions] = useState({
    read: true,
    write: false,
    delete: false,
    admin: false
  });

  const updatePermission = (key, value) => {
    setPermissions(prev => ({ ...prev, [key]: value }));
  };

  const configurePermission = (permissionType) => {
    console.log(`Configuring ${permissionType} permission`);
  };

  return (
    <div className="permission-manager">
      <h3>User Permissions</h3>
      
      <CheckboxItem
        checked={permissions.read}
        onValueChange={(value) => updatePermission('read', value)}
        showRightButton={true}
        onRightButtonClick={() => configurePermission('read')}
        rightButtonIcon={<EyeIcon />}
      >
        Read Access
      </CheckboxItem>

      <CheckboxItem
        checked={permissions.write}
        onValueChange={(value) => updatePermission('write', value)}
        showRightButton={true}
        onRightButtonClick={() => configurePermission('write')}
        rightButtonIcon={<PencilIcon />}
      >
        Write Access
      </CheckboxItem>

      <CheckboxItem
        checked={permissions.delete}
        onValueChange={(value) => updatePermission('delete', value)}
        showRightButton={true}
        onRightButtonClick={() => configurePermission('delete')}
        rightButtonIcon={<TrashIcon />}
        invalid={permissions.delete && !permissions.write}
      >
        Delete Access
      </CheckboxItem>

      <CheckboxItem
        checked={permissions.admin}
        onValueChange={(value) => updatePermission('admin', value)}
        showRightButton={true}
        onRightButtonClick={() => configurePermission('admin')}
        rightButtonIcon={<CogIcon />}
        disabled={!permissions.read || !permissions.write}
      >
        Admin Access
      </CheckboxItem>
    </div>
  );
}
```

### Disabled States
```tsx
function DisabledStatesExample() {
  return (
    <div className="disabled-states">
      <CheckboxItem disabled>
        Disabled without button
      </CheckboxItem>

      <CheckboxItem 
        disabled
        checked={true}
      >
        Disabled and checked
      </CheckboxItem>

      <CheckboxItem
        disabled
        showRightButton={true}
        rightButtonIcon={<CogIcon />}
      >
        Disabled with button
      </CheckboxItem>
    </div>
  );
}
```