AdvancedCheckbox

A basic widget for getting the user input of checkbox with advanced design.

import { AdvancedCheckbox } from "rizzui";

Simple Advanced Checkbox

You can change style of AdvancedCheckbox.

Any12345+

import { AdvancedCheckbox } from "rizzui";

export default function App() {
  return (
    <div className="flex flex-wrap gap-6">
      <AdvancedCheckbox name="age" value="any" alignment="center">
        Any
      </AdvancedCheckbox>
      <AdvancedCheckbox
        name="age"
        value="one"
        defaultChecked
        alignment="center"
      >
        1
      </AdvancedCheckbox>
      <AdvancedCheckbox name="age" value="two" alignment="center">
        2
      </AdvancedCheckbox>
      <AdvancedCheckbox name="age" value="three" disabled alignment="center">
        3
      </AdvancedCheckbox>
      <AdvancedCheckbox name="age" value="four" alignment="center">
        4
      </AdvancedCheckbox>
      <AdvancedCheckbox name="age" value="five+" alignment="center">
        5+
      </AdvancedCheckbox>
    </div>
  );
}

Currency Card Checkbox

You can give different style of AdvancedCheckbox as you need.

Taka

Dollar

Euro

Pound

import { AdvancedCheckbox, CheckboxGroup, Text } from "rizzui";
import { CheckCircleIcon } from "@heroicons/react/20/solid";

export default function App() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <AdvancedCheckbox name="currency" value="taka" defaultChecked>
        <CurrencyBangladeshiIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Taka</Text>
      </AdvancedCheckbox>
      <AdvancedCheckbox name="currency" value="dollar">
        <CurrencyDollarIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Dollar</Text>
      </AdvancedCheckbox>
      <AdvancedCheckbox name="currency" value="euro">
        <CurrencyEuroIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Euro</Text>
      </AdvancedCheckbox>
      <AdvancedCheckbox name="currency" value="pound">
        <CurrencyPoundIcon className="w-7 h-auto mb-4" />
        <Text className="font-semibold">Pound</Text>
      </AdvancedCheckbox>
    </div>
  );
}

API Reference

---

AdvancedCheckbox Props

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

Props	Type	Description	Default
children	ReactNode	Pass content as children	__
disabled	boolean	Whether the checkbox is disabled or not	__
size	CheckboxSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
rounded	CheckboxRounded	The rounded variants are:	"md"
inputClassName	string	Add inputClassName to style the input	__
contentClassName	string	Add contentClassName to style the input	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLInputElement>		__
...	InputHTMLAttributes	native props like value, onChange, onFocus, onBlur ...	__

Advanced Checkbox Sizes

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

Advanced Checkbox Rounded

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