 <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.

 <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.

 <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.

 <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.

 <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>

As a form element

Use a form when users need to select independent options in any combination or confirm a single opt-in such as acknowledging terms, ensuring labels are concise and action-oriented.

 <Flex direction="column" gap="2">
  <Text size="2" weight="bold">
    OAuth tokens
  </Text>
  <Flex direction="row" gap="2">
    <Checkbox id="checkbox-11" />
    <Label htmlFor="checkbox-11">
      <Text size="2" weight="regular">
        Return Google OAuth tokens
      </Text>
    </Label>
  </Flex>
</Flex>

With description

Use a description when the label alone does not provide enough context, keeping the label short and direct while the description adds concise supporting details.

 <Flex direction="column" gap="2">
  <Text size="2" weight="bold">
    Client authentication
  </Text>
  <Flex direction="row" gap="2">
    <Checkbox id="checkbox-12" />
    <Flex direction="column" gap="1">
      <Text size="2" weight="bold">
        <label htmlFor="checkbox-12">Use PKCE</label>
      </Text>
      <Text size="2">
        By default, applications are confidential and must authenticate with a
        client secret. Public applications require PKCE for token endpoint
        authentication.
      </Text>
    </Flex>
  </Flex>
</Flex>

Variants

Dashboard

4 variants found

Checkbox in Email Notifications Formdashboard

Checkbox in Edit Brandingdashboard

/branding/edit

disabled checkbox in Edit Organization Rule Dialogdashboard

disabled=true

disabled checkbox in Edit User Rule Dialogdashboard

disabled=true

Context

Usage

Used 61 times across 2 packages

Dashboard

Admin Portal

Variant Distribution

disabled

true

100%

Where it's used

36 files

packages/dashboard/src/components/authentication/configure-email-password-dialog.tsx6

packages/dashboard/src/components/configuration/custom-attributes/custom-attribute-mapping-in-admin-portal-dialog.tsx4

packages/dashboard/src/components/directory-sync/directory-group-sync/allow-list-v2.tsx3

packages/dashboard/src/components/settings/profile/email-notifications-form.tsx3

packages/dashboard/src/components/webhooks/webhook-event-category-items.tsx3

packages/dashboard/src/components/authentication/configure-sso-auth-dialog.tsx2

packages/dashboard/src/components/configuration/stripe-entitlements/dialogs/connect-dialog-with-seat-sync.tsx2

packages/dashboard/src/components/configuration/stripe-entitlements/dialogs/connected-dialog.tsx2

/p/:portalSessionId/directory-sync/:directoryId/google-workspace/filter-groups-v2

packages/admin-portal/src/app/p/[portalSessionId]/directory-sync/[directoryId]/google-workspace/filter-groups-v2/filter-groups-section.tsx3

/:environmentId/applications/configuration

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/configuration/manage-mcp-auth.tsx2

Show 26 more files

Checkbox

On this page

Props

Usage

Alignment

Disabled

As a form element

With description

Variants

Dashboard

Context

Usage Statistics

Usage

Variant Distribution

Where it's used