Made by ScaleRadix Homepage
Scale UI Radix
DocumentationDocumentationComponents CatalogComponents CatalogPlayroomPlayroom
Radix PrimitivesFont Awesome Icons
Components

Checkbox

Base input element to toggle an option on and off.

View sourceReport an issueView in Catalog
<Text as="label" size="2">

  <Flex gap="2">

    <Checkbox defaultChecked />

    Agree to Terms and Conditions

  </Flex>

</Text>

API Reference

This component inherits props from the Checkbox primitive and supports common margin props.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
highContrast
boolean
No default value

Examples

Size

Use the size prop to control the size of the checkbox.

<Flex align="center" gap="2">

  <Checkbox size="1" defaultChecked />

  <Checkbox size="2" defaultChecked />

  <Checkbox size="3" defaultChecked />

</Flex>

Variant

Use the variant prop to control the visual style of the checkbox. Currently, we recommend using only the surface and soft variant following the ScaleUI Radix design system.

<Flex align="center" gap="4">

  <Flex gap="2">

    <Checkbox variant="surface" defaultChecked />

    <Checkbox variant="surface" />

  </Flex>



  <Flex gap="2">

    <Checkbox variant="soft" defaultChecked />

    <Checkbox variant="soft" />

  </Flex>

</Flex>

Alignment

Composing Checkbox within Text automatically centers it with the first line of text.

<Flex direction="column" gap="3">

  <Text as="label" size="2">

    <Flex as="span" gap="2">

      <Checkbox size="1" defaultChecked /> Agree to Terms and Conditions

    </Flex>

  </Text>



  <Text as="label" size="3">

    <Flex as="span" gap="2">

      <Checkbox size="2" defaultChecked /> Agree to Terms and Conditions

    </Flex>

  </Text>



  <Text as="label" size="4">

    <Flex as="span" gap="2">

      <Checkbox size="3" defaultChecked /> Agree to Terms and Conditions

    </Flex>

  </Text>

</Flex>

It is automatically well-aligned with multi-line text too.

<Box maxWidth="300px">

  <Text as="label" size="3">

    <Flex as="span" gap="2">

      <Checkbox defaultChecked /> I understand that these documents are confidential and cannot be

      shared with a third party.

    </Flex>

  </Text>

</Box>

Disabled

Use the native disabled attribute to create a disabled checkbox.

<Flex direction="column" gap="2">

  <Text as="label" size="2">

    <Flex as="span" gap="2">

      <Checkbox />

      Not checked

    </Flex>

  </Text>



  <Text as="label" size="2">

    <Flex as="span" gap="2">

      <Checkbox defaultChecked />

      Checked

    </Flex>

  </Text>



  <Text as="label" size="2" color="neutral">

    <Flex as="span" gap="2">

      <Checkbox disabled />

      Not checked

    </Flex>

  </Text>



  <Text as="label" size="2" color="neutral">

    <Flex as="span" gap="2">

      <Checkbox disabled defaultChecked />

      Checked

    </Flex>

  </Text>

</Flex>

Indeterminate

Use the "indeterminate" value to create an indeterminate checkbox.

<Flex gap="2">

  <Checkbox defaultChecked="indeterminate" />

  <Checkbox checked="indeterminate" />

</Flex>
PreviousCard
NextCheckbox Group
Edit this page on GitHub.