Checkbox

Introduction

A checkbox is a component that allows the user to select one or more items from a set of options. This input could be super useful when you need to select multiple items from a short list of options.

Import the component from pol-ui to use the checkbox element:

Importation

import { Checkbox } from "pol-ui";

Default checkbox

The default checkbox component comes with a set of control buttons and indicators to navigate between the items.

import { Checkbox } from "pol-ui";
 
import React from "react";
 
const CheckboxComponent = () => {
  return (
    <Checkbox
      label="Controlled checkbox"
      color={ColorsEnum.primary}
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
};
export default CheckboxComponent;

Props

The checkbox component comes with a set of props to customize the appearance and behavior of the component.

This props are a small amount, our goal is to keep the component simple and easy to use and be the most native possible.

You can also pass any prop that the native input checkbox accepts.

Customization

Uncontrolled checkbox

You can always use the checkbox as an uncontrolled component, this means that the checkbox will manage its own state and then you can get the value of the checkbox using the ref prop, a form submit or any other way.

import { Checkbox } from "pol-ui";
 
import React from "react";
 
const CheckboxComponent = () => {
  return <Checkbox label="Uncontrolled checkbox" />;
};
export default CheckboxComponent;

All colors

As all the components in pol-ui, the checkbox component comes with a set of colors to customize the appearance of the component.

import { Checkbox, ColorsEnum } from "pol-ui";
 
import React from "react";
 
const CheckboxComponent = () => {
  return (
    <div className="flex flex-wrap gap-8">
    {Object.keys(ColorsEnum).map(status => (
      <div key={status} className="flex flex-col items-center justify-center">
        <Checkbox color={status as keyof typeof ColorsEnum} defaultChecked label={status} />
      </div>
    ))}
  </div>
  );
};
export default CheckboxComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface CheckboxTheme {
  base: string;
  color: ColorsType;
  before: string;
  floating: {
    base: string;
    svg: string;
  };
  check: {
    base: string;
    color: ColorsType;
  };
}

Further reading

See more about when to use a checkbox