CheckboxItem Component

The CheckboxItem component is a customizable checkbox input for React applications. It supports RTL layouts, custom icons, and keyboard navigation.

Features

• Customizable checkbox appearance
• RTL (Right-to-Left) support
• Keyboard navigation
• Custom icon support
• Active state styling

Installation

To install the CheckboxItem component in your project, run:

npm i ino-checkboxitem

Usage

Import the CheckboxItem component in your React file:

Use the component in your JSX:

Props

| Prop | Type | Default | Description | | -------------- | --------- | ------- | ------------------------------------------------------------ | | defaultChecked | boolean | false | Initial checked state of the checkbox | | label | string | - | Text label for the checkbox | | onChange | function | - | Callback function called when the checkbox state changes | | isActive | boolean | - | Whether the checkbox is currently active/focused | | classNames | string | - | Additional CSS classes to apply to the component | | icon | component | - | Custom icon component to use instead of the default checkbox | | onDown | function | - | Callback for down arrow key press | | onUp | function | - | Callback for up arrow key press | | onLeft | function | - | Callback for left arrow key press | | onRight | function | - | Callback for right arrow key press | | onOk | function | - | Callback for Enter/OK key press | | onBack | function | - | Callback for Back key press | | isRTL | boolean | false | Whether to render the component in RTL mode |

Styling

The component uses SCSS for styling. You can customize the appearance by targeting the following main classes:

1. .ino-checkbox-item: The main container for the checkbox item.
2. .ino-checkbox-container: The container for the checkbox input and label.
3. .ino-checkmark: The custom checkbox icon container.
4. .ino-label: The label text for the checkbox.

Additional modifier classes:

• .active: Applied when the checkbox is active/focused.
• .rtl: Applied for right-to-left layout.

Example of customizing styles:

Keyboard Navigation

The component supports keyboard navigation when active. Use the arrow keys to navigate between checkboxes, and the OK key to toggle the checkbox state.

Custom Icon

To use a custom icon instead of the default checkbox, pass a component to the icon prop. The custom icon component will receive isChecked and isActive props.

Example

import CheckboxItem from "./CheckboxItem";

const ExampleComponent = () => {

const handleChange = (checked) => {
console.log("Checkbox state:", checked);
};

return (

<div>
    <CheckboxItem
        label="Default Checkbox"
        onChange={handleChange}
        isActive={true}
      />
    <CheckboxItem
        label="Custom Icon Checkbox"
        onChange={handleChange}
        icon={CustomIcon}
        isRTL={true}
      />
</div>
);
};
export default ExampleComponent;

This example demonstrates how to use the CheckboxItem component with both default and custom icons, as well as in RTL mode.