Site settings
Change the appearance of the site to suit your preferences
RadioCard
The `RadioCard` component can be used as a card that have the functionality of a Radio button.
In order to use RadioCard, you typically want to place these components in a `RadioCardGroup` with several other RadioCards.
Basic example
<RadioCardGroup> <RadioCardLabel>How do you want to travel?</RadioCardLabel> <Stack direction="row" gap="2"> <RadioCard padding={4} value="bus">Bus</RadioCard> <RadioCard padding={4} value="train">Train</RadioCard> <RadioCard padding={4} value="taxi">Taxi</RadioCard> </Stack> </RadioCardGroup>
With defaultValue
<RadioCardGroup defaultValue="bus"> <RadioCardLabel>How do you want to travel?</RadioCardLabel> <Stack direction="row" gap="2"> <RadioCard padding={4} value="bus">Bus</RadioCard> <RadioCard padding={4} value="train">Train</RadioCard> <RadioCard padding={4} value="taxi">Taxi</RadioCard> </Stack> </RadioCardGroup>
Complex organisation
() => { const [showOptions, setShowOptions] = React.useState(false) return ( <Box> <RadioCardGroup defaultValue="train"> <RadioCardLabel> How do you prefer to travel? </RadioCardLabel> <RadioCard padding={4} value="train">Train</RadioCard> {showOptions && ( <Stack direction="row" align="stretch" flexGrow="4"> <RadioCard padding="4" flex="1" value="bus">Bus</RadioCard> <RadioCard padding={4} value="taxi">Taxi</RadioCard> <RadioCard padding={4} value="fly">Fly</RadioCard> </Stack> )} <Box> <Button variant="ghost" onClick={() => setShowOptions(!showOptions)}> {!showOptions ? "Show more options" : "Show less options"} </Button> </Box> </RadioCardGroup> </Box> ) }
Different variants of RadioCard
<Flex gap={4}> <RadioCardGroup> <RadioCardLabel>Core</RadioCardLabel> <RadioCard padding={4} value="core">Core</RadioCard> </RadioCardGroup> <RadioCardGroup variant="floating"> <RadioCardLabel>Floating</RadioCardLabel> <RadioCard padding={4} value="floating">Floating</RadioCard> </RadioCardGroup> </Flex>
Disabled
<RadioCardGroup disabled> <RadioCardLabel>This is the disabled version</RadioCardLabel> <Stack direction="row" gap="2"> <RadioCard padding={4} value="bus">Bus</RadioCard> <RadioCard padding={4} value="train">Train</RadioCard> <RadioCard padding={4} value="taxi">Taxi</RadioCard> </Stack> </RadioCardGroup>