ino-checkboxitem v1.0.14

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

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.