Skip to content
Vy logo
Components

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.


Examples

<RadioCardGroup padding={4} name="modality">
  <RadioCard value="buss">Buss</RadioCard>
  <RadioCard value="tog">Tog</RadioCard>
  <RadioCard value="taxi">Taxi</RadioCard>
</RadioCardGroup>

Different variants of RadioCard

<Flex gap={4}>
  <RadioCardGroup padding={4}>
    <RadioCard>Base</RadioCard>
  </RadioCardGroup>
  <RadioCardGroup variant="floating" padding={4}>
    <RadioCard>Floating</RadioCard>
  </RadioCardGroup>
</Flex>

Can be organised inside the RadioCardGroup

<RadioCardGroup padding={4} name="modality">
  <RadioCard value="buss">Buss</RadioCard>
  <RadioCard value="tog">Tog</RadioCard>
  <Stack>
    <RadioCard value="taxi">Taxi</RadioCard>
    <RadioCard value="fly">Fly</RadioCard>
  </Stack>
</RadioCardGroup>

A group with a descriptive label

<FormControl as="fieldset">
  <FormLabel as="legend">
    Hvordan vil du reise?
  </FormLabel>
  <RadioCardGroup name="modality" padding={4}>
    <RadioCard value="bus">Buss</Radio>
    <RadioCard value="train">Tog</Radio>
    <RadioCard value="plane">Fly</Radio>
  </RadioCardGroup>
</FormControl>