Getting Started

Foundations

ColorPaletteTypographyIconographyThemingBreakpoints

Core Components

AbsoluteBackgroundImageBadgeBannerBlockLinkBoxButtonCardCheckboxCloseButtonContainerDividerFlagFlexFormFieldGenericBannerHeadingHideHugIconIconButtonIconFieldImageInputInputGroupLabelLinkPlaceholderImageProgressBarRadioRatingBadgeRelativeSelectStampSwatchTextTextAreaToggleBadgeTooltipTruncate

Modal Components

ModalScrollLock

Popover

Popover

Slider

RangeSliderSlider

Utilities

borderscolorgetPaletteColorgetTextColorOngetLinkStylesOn

Resources

MotionLayoutContributingGitHub

Checkbox

Use the Checkbox component as a styled version of the HTML <input type='checkbox'> Wrap the Checkbox component with the Label component to create a form control.

<Label fontSize={1}>
  <Checkbox id='one' />
  {' '}
  One
</Label>
<Label fontSize={1}>
  <Checkbox
    id='two'
    checked
  />
  {' '}
  Two
</Label>
<Label fontSize={1}>
  <Checkbox
    id='three'
    disabled
  />
  {' '}
  Three
</Label>

Props

PropTypeDescription
colorstringThe color of the checkbox, defaults to primary

Color

You can choose any palette or theme color for Checkbox.

<Label fontSize={1}>
  <Checkbox id='one' color='secondary' /> One
</Label>
<Label fontSize={1}>
  <Checkbox id='two' checked color='secondary'/> Two
</Label>
<Label fontSize={1}>
  <Checkbox id='three' disabled color='secondary'/> Three
</Label>

Uses the color from theme.palette.secondary.base.

<Label fontSize={1}>
  <Checkbox id='one' color='error' /> One
</Label>
<Label fontSize={1}>
  <Checkbox id='two' checked color='error'/> Two
</Label>
<Label fontSize={1}>
  <Checkbox id='three' disabled color='error'/> Three
</Label>

Uses the color from theme.palette.error.base.

<Label fontSize={1}>
  <Checkbox id='one' color='warning' /> One
</Label>
<Label fontSize={1}>
  <Checkbox id='two' checked color='warning'/> Two
</Label>
<Label fontSize={1}>
  <Checkbox id='three' disabled color='warning'/> Three
</Label>

Uses the color from theme.palette.warning.base.

Card
CloseButton