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.
Code examples
<RadioCardGroup width="100%"> <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>
Guidelines
RadioCardGroup
`RadioCardGroup` is a component that provides a context for `RadioCard` components. It allows you to create a group of radio cards where only one can be selected at a time.
RadioCardLabel
The label is essential for accessibility and should be defined to recognise the group. Has some default styles but accepts all BoxProps.
RadioCard
`RadioCard` is a component that represents a single option within a `RadioCardGroup`. By default it has a value of flex: 1, which means they will stretch out and take up all the space in a group. You may change this depening on your needs. Only one `RadioCard` within a `RadioCardGroup` can be selected at a time.
Code
<RadioCardGroup />
import { RadioCardGroup } from "@vygruppen/spor-react";
Utilises BoxProps as well
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
onValueChange | (value: string) => void | For a controlled RadioCardGroup | |
variant | "core" | "floating" | Defaults to "core" | |
defaultValue | string | Adds a default selection |
<RadioCard />
import { RadioCard } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
value | string | The value returned when selected | |
inputProps | React.InputHTMLAttributes<HTMLInputElement> | Targets the hidden input. useful for aria-props etc. |
<RadioCardLabel />
import { RadioCardLabel } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode |