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

Radio Cards

Set of interactive cards where only one can be selected at a time.

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

  <RadioCards.Root defaultValue="1" columns={{ initial: '1', sm: '3' }}>

    <RadioCards.Item value="1">

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

        <Text weight="medium">8-core CPU</Text>

        <Text>32 GB RAM</Text>

      </Flex>

    </RadioCards.Item>

    <RadioCards.Item value="2">

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

        <Text weight="medium">6-core CPU</Text>

        <Text>24 GB RAM</Text>

      </Flex>

    </RadioCards.Item>

    <RadioCards.Item value="3">

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

        <Text weight="medium">4-core CPU</Text>

        <Text>16 GB RAM</Text>

      </Flex>

    </RadioCards.Item>

  </RadioCards.Root>

</Box>

API Reference

This component inherits props from the Radio Group primitive 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(160px, 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">

  <RadioCards.Root size="1">

    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>

  </RadioCards.Root>



  <RadioCards.Root size="2">

    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>

  </RadioCards.Root>



  <RadioCards.Root size="3">

    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>

  </RadioCards.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">

  <RadioCards.Root variant="surface">

    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>

  </RadioCards.Root>

</Flex>

Disabled

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

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

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

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

  </RadioCards.Root>



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

    <RadioCards.Item value="1" disabled>

      Off

    </RadioCards.Item>

    <RadioCards.Item value="2" disabled>

      On

    </RadioCards.Item>

  </RadioCards.Root>

</Flex>
PreviousRadio Group
NextScroll Area
Edit this page on GitHub.