Skip to content

Checkbox

Checkbox is a UI element that allows users to make a binary choice, typically represented as a square box that can be checked (selected) or unchecked (deselected).

Loading Code Block...

To get started, install Butterfly DS via aqua:

Loading Code Block...
Loading Code Block...
sm
Loading Code Block...
Loading Code Block...
Loading Code Block...

PropsDefaultTypeDescription
sizemd'sm' | 'md'The size of the checkbox
colorSchemeprimary'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'The color scheme of the checkbox
title-stringThe title of the checkbox
titleBoldtruebooleanWhether the title should be bold
supportingText-stringAdditional text to support the checkbox
alignmentleft'left' | 'right'Alignment of the checkbox and text
disabledfalsebooleanWhether the checkbox is disabled
indeterminatefalsebooleanWhether the checkbox is in an indeterminate state
name-stringThe name attribute for the checkbox input
id-stringThe id attribute for the checkbox input
value-string | number | booleanThe value of the checkbox input
onChange-functionFunction to call when the checkbox state changes
className-stringCustom CSS class for additional styling
icon
icon icon icon icon