AppCheckbox

AppCheckbox is a customizable React checkbox component built with TypeScript. It provides a simple way to add checkbox functionality to your React applications with a clean, modern design.

Features

• Customizable label
• Controlled checkbox state
• TypeScript support for type safety
• Passes through additional props to the underlying input element

Installation

To use the AppCheckbox component in your React application, install it via npm:

npm install @droid-tech/react-ts-checkbox

Usage

To use the AppCheckbox component, import it and provide the required props:

import AppCheckbox from "@droid-tech/react-ts-checkbox";

const MyComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (checked: boolean) => {
    setIsChecked(checked);
  };

  return (
    <AppCheckbox
      label="Accept terms and conditions"
      checked={isChecked}
      onChange={handleChange}
    />
  );
};

Props

The AppCheckbox component accepts the following props:

| Prop | Type | Required | Description | |------------|-----------------------------------------------------------------------------------|----------|-------------------------------------------------------| | label | string | Yes | The text label for the checkbox | | checked | boolean | Yes | The current checked state of the checkbox | | onChange | (checked: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void | Yes | Function to call when the checkbox state changes |

Any additional props will be passed through to the underlying input element.

Customization

The AppCheckbox component uses styled-components, which allows for easy customization and theming. You can override the default styles by wrapping the AppCheckbox component with a styled-components theme provider or by creating new styled components based on the existing ones.

Accessibility

The AppCheckbox component is built with accessibility in mind. It uses a proper label element associated with the checkbox input, ensuring that screen readers can properly interpret the component.

Conclusion

The AppCheckbox component provides a simple and customizable way to add checkbox functionality to your React application. With its TypeScript support and styled-components integration, it can easily be styled to match your design requirements while maintaining type safety.