Checkbox | MDK

Checkbox component with full customization

import { Checkbox } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`size`	Optional	`CheckboxSize \| undefined`	`'md'`	Size variant of the checkbox
`color`	Optional	`"success" \| "warning" \| "error" \| "primary" \| "default" \| undefined`	`'primary'`	Color variant when checked
`radius`	Optional	`BorderRadius \| undefined`	`'none'`	Border radius variant
`className`	Optional	`string \| undefined`	—	Custom className for the root element
`indicatorClassName`	Optional	`string \| undefined`	—	Custom className for the indicator element
`onCheckedChange`	Optional	`(((checked: CheckedState) => void) & ((checked: CheckedState) => void)) \| undefined`	—	Callback when the checked state changes

Usage

Controlled or uncontrolled checkbox built on Radix UI. Supports size, color and border-radius variants. Indeterminate state via checked="indeterminate".

Notes

Always pair with a <Label> for accessibility.
Re-exports CheckedState from Radix for convenience.

Example

/** * Runnable example for Checkbox. */import { useState } from 'react'import { Checkbox, Label } from '@tetherto/mdk-react-devkit'export const CheckboxExample = () => {  const [agreed, setAgreed] = useState(false)  return (    <div className="mdk-example-col">      <div className="mdk-example-inline">        <Checkbox          id="agree"          checked={agreed}          onCheckedChange={(value) => setAgreed(value === true)}        />        <Label htmlFor="agree">I agree to the terms</Label>      </div>      <div className="mdk-example-inline">        <Checkbox id="indet" checked="indeterminate" />        <Label htmlFor="indet">Indeterminate</Label>      </div>      <div className="mdk-example-inline">        <Checkbox id="disabled" disabled />        <Label htmlFor="disabled">Disabled</Label>      </div>    </div>  )}