Checkbox

Version - 0.0.5

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions

Installation

npm install @volta/checkbox

Usage

import { Checkbox } from '@volta/checkbox';

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </label>
</div>

Examples

Sizes

The Checkbox component comes with 3 different sizes that you can change it using the size prop.

import { Button } from '@volta/button';
 
export function CheckboxSizes() {
  return (
    <div>
      <Checkbox id="terms" size="sm" />
      <Checkbox id="terms" size="md" />
      <Checkbox id="terms" size="lg" />
    </div>
  );
}

Checkbox Props

The following props are available for checkbox component. These are the custom props that we've added for the checkbox component and you can use all the other native props as well.

Attribute	Type	Description	Default
`size`	Size	Change button size	`md`
`className`	`string`	Add custom className for button	`''`

Card Chips