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

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.

OAuth tokens

Return Google OAuth tokens

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

Client authentication

Use PKCEBy default, applications are confidential and must authenticate with a client secret. Public applications require PKCE for token endpoint authentication.

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