Checkbox

A set of selectable buttons - where only one element can be selected at a time.

Installation

pnpm add @inpulse-ds/checkbox

Usage

This component needs to be in the context of a form to be rendered. Make sure it is applied this way.

import { useForm } from "react-hook-form";
import { Form } from '@inpulse-ds/form';
import { Checkbox } from '@inpulse-ds/checkbox';
 
const methods = useForm();
 
export function Demo() {
  return (
    <Form methods={methods}>
      <Checkbox name="checkbox">
        ...
      </Checkbox>
    </Form>
  );
}

API

Examples

Default value

You can set a default value to be selected when the component is rendered. To do this, simply use the defaultChecked property.

Disabled

You can disable a checkbox item individually by setting the disabled property to true directly in RadioItem.

Colors

By default, Checkbox will be assigned the theme's primary color when activated. But you can customize this color through CSS classes. The class must be applied directly to RadioItem. This way, you have the freedom to define different colors for each item.

Adopt a monochromatic style for the Checkbox by setting the mono property to true. This style will adapt to the system's light and dark mode. The property must be applied directly to RadioItem.

Events

Use the onChange event to perform an action every time the value of the Checkbox is changed.