Checkbox

<input> elements of type checkbox are rendered by default as square boxes that are checked (ticked) when activated, like you might see in an official government paper form. To use, import from @marvelapp/ui:

import { Checkbox } from '@marvelapp/ui';

Kind

The <Checkbox /> component has a few kinds available that can be used depending on the context of the action being performed.

<CheckboxContainer kind="defaultGreen" />
<CheckboxContainer kind="defaultBlue" />

State

The <Checkbox /> component has 3 states available.

<CheckboxContainer isChecked={false} />
<CheckboxContainer isChecked={null} />
<CheckboxContainer isChecked={true} />

Props

Prop

Type

Default

string

–

border

string

–

borderColor

string

–

borderRadius

string

borderWidth

string

boxShadow

string

–

children

string

–

color

string

slate

display

string

inline-block

fontSize

string

–

hoverColor

string

licorice

iconColor

string

white

isChecked

string

false

isDisabled

string

false

kind

defaultGreen

defaultGreenReversed

disabled

defaultBlue

blackTransparent

greyTransparent

whiteToGreen

defaultGreen

string

–

onChange

string

–

size

string

–

testId

string

–

type

string

–