OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Checkbox

Displays a custom checkbox element.

 <Checkbox />

API Reference

This component inherits the props from Radix Checkbox primitive and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Alignment

By default, the checkbox is vertically aligned when placed inline with Text size 2. This is the most common font size we use with controls.

Agree to Terms and Conditions

 <Flex direction="column" gap="3" maxWidth="300px">
  <Text size="2">
    <label>
      <Checkbox mr="1" /> Agree to Terms and Conditions
    </label>
  </Text>
</Flex>

It is also well-aligned with Text size 2 in a default flex layout.

I understand that these documents are confidential and cannot be shared with a third party.

 <Box maxWidth="300px">
  <Text size="2">
    <Flex gap="2">
      <Checkbox id="checkbox-1" />
      <label htmlFor="checkbox-1">
        I understand that these documents are confidential and cannot be shared
        with a third party.
      </label>
    </Flex>
  </Text>
</Box>

Use center alignment with other Text sizes.

Agree to Terms and Conditions

 <Flex direction="column" gap="3" maxWidth="300px">
  <Text size="1">
    <Flex align="center" gap="2">
      <Checkbox id="checkbox-2" />
      <label htmlFor="checkbox-2">Agree to Terms and Conditions</label>
    </Flex>
  </Text>

  <Text size="2">
    <Flex align="center" gap="2">
      <Checkbox id="checkbox-3" />
      <label htmlFor="checkbox-3">Agree to Terms and Conditions</label>
    </Flex>
  </Text>

  <Text size="3">
    <Flex align="center" gap="2">
      <Checkbox id="checkbox-4" />
      <label htmlFor="checkbox-4">Agree to Terms and Conditions</label>
    </Flex>
  </Text>

  <Text size="4">
    <Flex align="center" gap="2">
      <Checkbox id="checkbox-5" />
      <label htmlFor="checkbox-5">Agree to Terms and Conditions</label>
    </Flex>
  </Text>
</Flex>

You can also nest Flex elements to reliably align the checkbox with the first line of text. In this case, the height of the second Flex container matches the text line height.

I understand that these documents are confidential and cannot be shared with a third party.

 <Box maxWidth="300px">
  <Text size="3">
    <Flex align="start" gap="2">
      <Flex align="center" height="24px">
        <Checkbox id="checkbox-6" />
      </Flex>
      <label htmlFor="checkbox-6">
        I understand that these documents are confidential and cannot be shared
        with a third party.
      </label>
    </Flex>
  </Text>
</Box>

Disabled

Use the native disabled attribute to create a disabled checkbox.

Not checked

Checked

Disabled

Disabled checked

 <Text size="2">
  <Flex direction="column" gap="2">
    <Flex align="center" gap="2">
      <Checkbox id="checkbox-7" />
      <label htmlFor="checkbox-7">Not checked</label>
    </Flex>

    <Flex align="center" gap="2">
      <Checkbox id="checkbox-8" defaultChecked />
      <label htmlFor="checkbox-8">Checked</label>
    </Flex>

    <Flex align="center" gap="2">
      <Checkbox id="checkbox-9" disabled />
      <label htmlFor="checkbox-9">Disabled</label>
    </Flex>

    <Flex align="center" gap="2">
      <Checkbox id="checkbox-10" defaultChecked disabled />
      <label htmlFor="checkbox-10">Disabled checked</label>
    </Flex>
  </Flex>
</Text>