Checkbox

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

'use client';

import { Checkbox } from 'rizzui/checkbox';

Default

The default style of Checkbox component.

Remember me

'use client';

import { Checkbox } from 'rizzui/checkbox';

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

Variants

You can change the style of Checkbox using variant property.

Outline

Flat

'use client';

import { Checkbox } from 'rizzui/checkbox';

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

'use client';

import { Checkbox } from 'rizzui/checkbox';

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" />
    </>
  );
}

Label Placement

You can set label on the two different sides using labelPlacement property.

Left Placement

Right Placement

'use client';

import { Checkbox } from 'rizzui/checkbox';

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

'use client';

import { Checkbox } from 'rizzui/checkbox';

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.

'use client';

import { Checkbox } from 'rizzui/checkbox';

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

'use client';

import { Checkbox } from 'rizzui/checkbox';

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"
disabled	boolean	Whether the input is disabled or not	__
indeterminate	boolean	Whether the input indeterminate or not	__
error	string	Show error message using this prop	__
helperText	ReactNode	Add helper text. Can be a string or a React component	__
iconClassName	string	Use iconClassName prop to apply some additional style for check mark icon	__
labelClassName	string	Use labelClassName prop to apply some additional style for the field label	__
inputClassName	string	Add custom classes for the input field 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';