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

Basic example

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

Different variants of RadioCard

<Flex gap={4}>
  <RadioCardGroup name="base-example">
    <RadioCard padding={4} value="base">Base</RadioCard>
  </RadioCardGroup>
  <RadioCardGroup variant="floating" name="floating-example">
    <RadioCard padding={4} value="floating">Floating</RadioCard>
  </RadioCardGroup>
</Flex>

Can be organised inside the RadioCardGroup

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

A group with a descriptive label

<RadioCardGroup name="modality" groupLabel="Velg transportmiddel">
  <RadioCard value="bus" padding={4}>Buss</Radio>
  <RadioCard value="train" padding={4}>Tog</Radio>
  <RadioCard value="plane" padding={4}>Fly</Radio>
</RadioCardGroup>