Checkbox

A basic widget for getting the user input, used for selecting multiple values from several options.

import { Checkbox } from "rizzui";

Default

The default style of Checkbox component.

Remember me

import { Checkbox } from "rizzui";

export default function App() {
  return <Checkbox label="Remember me" />;
}

Variants

You can change the style of Checkbox using variant property.

Outline

Flat

import { Checkbox } from "rizzui";

export default function App() {
  return (
    <>
      <Checkbox className="m-2" label="Outline" variant="outline" />
      <Checkbox className="m-2" label="Flat" variant="flat" />
    </>
  );
}

Sizes

You can change the sizes of Checkbox using size property.

Small

Default

Large

Extra Large

import { Checkbox } from "rizzui";

export default function App() {
  return (
    <>
      <Checkbox className="m-2" label="Small" size="sm" />
      <Checkbox className="m-2" label="Default" size="md" />
      <Checkbox className="m-2" label="Large" size="lg" />
      <Checkbox className="m-2" label="Extra Large" size="xl" />
    </>
  );
}

Rounded

You can change the border radius of Checkbox using rounded property.

Rounded Small

Rounded Default

Rounded Large

Rounded None

Rounded Circle

import { Checkbox } from "rizzui";

export default function App() {
  return (
    <>
      <Checkbox className="m-2" label="Rounded Small" rounded="sm" />
      <Checkbox className="m-2" label="Rounded Default" />
      <Checkbox className="m-2" label="Rounded Large" rounded="lg" />
      <Checkbox className="m-2" label="Rounded None" rounded="none" />
      <Checkbox className="m-2" label="Rounded Circle" rounded="full" />
    </>
  );
}

Label Placement

You can set label on the two diffrient side using labelPlacement property.

Left Placement

Right Placement

import { Checkbox } from "rizzui";

export default function App() {
  return (
    <>
      <Checkbox className="m-2" label="Left Placement" labelPlacement="left" />
      <Checkbox
        className="m-2"
        label="Right Placement"
        labelPlacement="right"
      />
    </>
  );
}

Disabled

The disabled style of the Checkbox component.

Disabled

import { Checkbox } from "rizzui";

export default function App() {
  return <Checkbox className="m-2" label="Left Placement" disabled />;
}

With Helper Text

You can add helper text to Checkbox using helperText property.

John

Hi! My name is John Doe.

import { Checkbox } from "rizzui";

export default function App() {
  return (
    <Checkbox
      className="m-2"
      label="John"
      value="john"
      helperText="Hi! My name is John Doe."
    />
  );
}

With Error Message

You can show the validation error message using error property.

Yes

This field is required

import { Checkbox } from "rizzui";

export default function App() {
  return (
    <Checkbox
      className="m-2"
      label="Yes"
      value="yes"
      error="This field is required"
    />
  );
}

API Reference

---

Checkbox Props

Here is the API documentation of the Checkbox component. And the rest of the props of Checkbox are the same as the original html input field.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
labelPlacement	left right	Change label direction	"right"
variant	CheckboxVariants	The variants of the component are:	"outline"
size	CheckboxSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
rounded	CheckboxRounded	The rounded variants are:	"md"
disabled	boolean	Whether the input is disabled or not	__
error	string	Show error message using this prop	__
helperText	ReactNode	Add helper text. It could be string or a React component	__
iconClassName	string	Use iconClassName prop to apply some additonal style for check mark icon	__
labelClassName	string	Use labelClassName prop to apply some addition style for the field label	__
inputClassName	string	Add custom classes for the input filed extra style	__
helperClassName	string	This prop allows you to customize the helper message style	__
errorClassName	string	This prop allows you to customize the error message style	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLInputElement>		__
...	InputHTMLAttributes	native props like value, onChange, onFocus, onBlur ...	__

Checkbox Variants

type CheckboxVariants = "outline" | "flat";

Label Weight

type LabelWeight = "normal" | "medium" | "semibold" | "bold";

Checkbox Sizes

type CheckboxSizes = "sm" | "md" | "lg" | "xl";

Checkbox Rounded

type CheckboxRounded = "sm" | "md" | "lg" | "full" | "none";