logo
DocsThemes

Checkbox

A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.

SourceReferenceAPI Reference

Usage#

Demo#

import { Checkbox } from "pigment-ui";

function CheckboxDemo() {
  return <Checkbox>Unsubscribe</Checkbox>;
}

Size#

import { Checkbox } from "pigment-ui";

function CheckboxSize() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox size="sm">Unsubscribe</Checkbox>
      <Checkbox size="md">Unsubscribe</Checkbox>
      <Checkbox size="lg">Unsubscribe</Checkbox>
    </div>
  );
}

Radius#

import { Checkbox } from "pigment-ui";

function CheckboxRadius() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox radius="sm">Unsubscribe</Checkbox>
      <Checkbox radius="md">Unsubscribe</Checkbox>
      <Checkbox radius="lg">Unsubscribe</Checkbox>
      <Checkbox radius="full">Unsubscribe</Checkbox>
      <Checkbox radius="none">Unsubscribe</Checkbox>
    </div>
  );
}

Indeterminate#

import { Checkbox } from "pigment-ui";

function CheckboxIndeterminate() {
  return <Checkbox isIndeterminate>Unsubscribe</Checkbox>;
}

Invalid#

import { Checkbox } from "pigment-ui";

function CheckboxInvalid() {
  return <Checkbox isInvalid>Unsubscribe</Checkbox>;
}

Disabled#

import { Checkbox } from "pigment-ui";

function CheckboxDisabled() {
  return <Checkbox isDisabled>Unsubscribe</Checkbox>;
}

Style slots#

type CheckboxStyleSlots = "base" | "self";

type CheckboxStyleProps = {
  classNames?: { [slot in keyof CheckboxStyleSlots]?: string };
  styles?: { [slot in keyof CheckboxStyleSlots]?: CSSProperties };
};

import { Checkbox } from "pigment-ui";

function CheckboxStyleSlots() {
  return <Checkbox classNames={{ base: "p-4 bg-info-100 rounded-xl", self: "bg-info-500 border-info-500" }}>Unsubscribe</Checkbox>;
}
Edit this page
CardCheckboxGroup