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

Checkbox Cards

Set of interactive cards where multiple options can be selected at a time.

View sourceReport an issueView in Catalog
<Box maxWidth="600px">

  <CheckboxCards.Root defaultValue={['1']} columns={{ initial: '1', sm: '3' }}>

    <CheckboxCards.Item value="1">

      <Flex direction="column" width="100%">

        <Text weight="medium">A1 Keyboard</Text>

        <Text>US Layout</Text>

      </Flex>

    </CheckboxCards.Item>

    <CheckboxCards.Item value="2">

      <Flex direction="column" width="100%">

        <Text weight="medium">Pro Mouse</Text>

        <Text>Zero-lag wireless</Text>

      </Flex>

    </CheckboxCards.Item>

    <CheckboxCards.Item value="3">

      <Flex direction="column" width="100%">

        <Text weight="medium">Lightning Mat</Text>

        <Text>Wireless charging</Text>

      </Flex>

    </CheckboxCards.Item>

  </CheckboxCards.Root>

</Box>

API Reference

This component is based on the div element and supports common margin props.

Root

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
variant
"surface" | "classic"
"surface"
color
enum
No default value
highContrast
boolean
No default value
columns
Responsive<enum | string>
"repeat(auto-fit, minmax(200px, 1fr))"
gap
Responsive<enum | string>
"4"

Item

An item in the group that can be checked.

Examples

Size

Use the size prop to control the size.

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

  <CheckboxCards.Root defaultValue={['1']} size="1">

    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

  </CheckboxCards.Root>



  <CheckboxCards.Root defaultValue={['1']} size="2">

    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

  </CheckboxCards.Root>



  <CheckboxCards.Root defaultValue={['1']} size="3">

    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

  </CheckboxCards.Root>

</Flex>

Variant

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

<Flex direction="column" gap="3" maxWidth="200px">

  <CheckboxCards.Root defaultValue={['1']} variant="surface">

    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

  </CheckboxCards.Root>

</Flex>

Disabled

<Flex direction="column" gap="4" maxWidth="450px">

  <CheckboxCards.Root columns="2" defaultValue="2">

    <CheckboxCards.Item value="1">Off</CheckboxCards.Item>

    <CheckboxCards.Item value="2">On</CheckboxCards.Item>

  </CheckboxCards.Root>

  <CheckboxCards.Root columns="2" defaultValue="2">

    <CheckboxCards.Item value="1" disabled>

      Off

    </CheckboxCards.Item>

    <CheckboxCards.Item value="2" disabled>

      On

    </CheckboxCards.Item>

  </CheckboxCards.Root>

</Flex>
PreviousCheckbox Group
NextContext Menu
Edit this page on GitHub.