Set of interactive cards where only one can be selected at a time.
<RadioCards.Root defaultValue="1" columns={{ initial: '1', sm: '3' }}> <RadioCards.Item value="1"> <Flex direction="column" width="100%"> <Text weight="bold">8-core CPU</Text> <Text>32 GB RAM</Text> </Flex> </RadioCards.Item> <RadioCards.Item value="2"> <Flex direction="column" width="100%"> <Text weight="bold">6-core CPU</Text> <Text>24 GB RAM</Text> </Flex> </RadioCards.Item> <RadioCards.Item value="3"> <Flex direction="column" width="100%"> <Text weight="bold">4-core CPU</Text> <Text>16 GB RAM</Text> </Flex> </RadioCards.Item> </RadioCards.Root>
No props data available for RadioCards.
Use the size prop to control the size.
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>
Use the variant prop to control the visual style.
variant
<Flex direction="column" gap="3"> <RadioCards.Root variant="surface"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> <RadioCards.Root variant="classic"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> </Flex>
Use the columns prop to control the number of columns.
columns
<Flex direction="column" gap="3"> <RadioCards.Root variant="surface" columns="2"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> <RadioCards.Item value="2">16-core CPU</RadioCards.Item> <RadioCards.Item value="3">32-core CPU</RadioCards.Item> <RadioCards.Item value="4">64-core CPU</RadioCards.Item> <RadioCards.Item value="5">128-core CPU</RadioCards.Item> </RadioCards.Root> </Flex>
Use the color prop to assign a specific color.
color
<Flex direction="column" gap="3"> <RadioCards.Root defaultValue="1" color="purple"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> <RadioCards.Root defaultValue="1" color="gray"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> </Flex>
Use the highContrast prop to increase color contrast with the background.
highContrast
<Grid columns="2" gap="3" display="inline-grid"> <RadioCards.Root defaultValue="1" color="purple"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> <RadioCards.Root defaultValue="1" color="purple" highContrast> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> <RadioCards.Root defaultValue="1" color="gray"> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> <RadioCards.Root defaultValue="1" color="gray" highContrast> <RadioCards.Item value="1">8-core CPU</RadioCards.Item> </RadioCards.Root> </Grid>
<Flex direction="column" gap="4" width="100%"> <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>
6 variants found
Used 58 times across 2 packages
gap
disabled
16 files
/:environmentId/applications
Show 6 more files