Radio Card

A Radio Button that enables extra emphasis and descriptive capability.

A set of RadioCards should be wrapped with a RadioCardGroup component to provide the correct HTML structure for our radio buttons. Any text within the card will be used as the label for the radio button, so ensure that you test this content and use aria-hidden to remove any unnecessary content from the announced text.

<RadioCardGroup>
  <RadioCard value="1">
    <Text className="mb-2">This is a radio card option</Text>
    <Text size="sm" className="text-grey-700">
      With some additional text
    </Text>
  </RadioCard>
  <RadioCard value="2">
    <Text className="mb-2">This is another radio card option</Text>
    <Text size="sm" className="text-grey-700">
      With some additional text
    </Text>
  </RadioCard>
  <RadioCard value="3">
    <Text className="mb-2">And a further radio card option</Text>
    <Text size="sm" className="text-grey-700">
      With some additional text
    </Text>
  </RadioCard>
</RadioCardGroup>

You can pass props to RadioCardGroup to control the styling of every RadioCard within. Change the radio button alignment within the card, toggle between two sizes, and render each card at full width.

<RadioCardGroup align="right" size="lg" isFullWidth defaultValue="1">
  <RadioCard value="1">
    <div className="flex flex-row content-center">
      <Text className="mr-4" size="sm">
        £99
      </Text>
      <Heading size="xs">This is a radio card option</Heading>
    </div>
  </RadioCard>
  <RadioCard value="2">
    <div className="flex flex-row content-center">
      <Text className="mr-4" size="sm">
        £109
      </Text>
      <Heading size="xs">This is another radio card option</Heading>
    </div>
  </RadioCard>
  <RadioCard value="3">
    <div className="flex flex-row content-center">
      <Text className="mr-4" size="sm">
        £149
      </Text>
      <Heading size="xs">And a further additional radio card option</Heading>
    </div>
  </RadioCard>
</RadioCardGroup>

API Reference

RadioCardGroup

Prop	Type	Default	Required
`align`	`"left"` \| `"right"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`checked`	`boolean`	-	-
`defaultValue`	`string`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`disabled`	`boolean`	-	-
`isFullWidth`	`boolean`	-	-
`loop`	`boolean`	-	-
`name`	`string`	-	-
`onValueChange`	`(value: string) => void`	-	-
`orientation`	`"horizontal"` \| `"vertical"`	-	-
`required`	`boolean`	-	-
`size`	`"md"` \| `"lg"`	-	-
`value`	`null` \| `string`	-	-

RadioCard

Prop	Type	Default	Required
`align`	`"left"` \| `"right"`	`left`	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`checked`	`boolean`	-	-
`isFullWidth`	`boolean`		-
`required`	`boolean`	-	-
`size`	`"md"` \| `"lg"`	`md`	-
`value`	`string`	-