Radio Card - React

View on Figma View on GitHub

import { RadioCard } from '@sky-uk/ui-core';

For fully composed form element examples and usage description see Control Field.

RadioCard is an alternative presention of a radio input that needs to stand out.

<RadioCard onClick={() => {}}>Pay monthly by direct debit</RadioCard>

Props

checked

boolean

disabled

boolean

readOnly

boolean

state

error

<Flex $flexDirection="column" $gap={4} >
  <RadioCard onClick={() => {}}>Card text</RadioCard>
  <RadioCard checked onClick={() => {}}>Card text</RadioCard>
  <RadioCard disabled>Card text</RadioCard>
  <RadioCard readOnly>Card text</RadioCard>
  <RadioCard state="error" onClick={() => {}}>Card text</RadioCard>
</Flex>

disabled and readOnly

<Flex $gap={6} $flexWrap="wrap">
  <RadioCard $padding={4} disabled $maxWidth="300px">
    <Flex $flexDirection="column" $gap={4}>
      <Tag label="Out of stock" $variant="negative" />
      <Image
        src="https://placehold.co/80x80"
        alt="Placeholder"
        $width="80px"
        $height="80px"
        $objectFit="contain"
      />
      <Text $fontSize="display-6" $fontWeight="bold">
        Custom content
      </Text>
      <Text>This is an example for a custom-made component</Text>
      <IconList>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
      </IconList>
    </Flex>
  </RadioCard>
  <RadioCard $padding={4} readOnly $maxWidth="300px">
    <Flex $flexDirection="column" $gap={4}>
      <Tag label="Out of stock" $variant="negative" />
      <Image
        src="https://placehold.co/80x80"
        alt="Placeholder"
        $width="80px"
        $height="80px"
        $objectFit="contain"
      />
      <Text $fontSize="display-6" $fontWeight="bold">
        Custom content
      </Text>
      <Text>This is an example for a custom-made component</Text>
      <IconList>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
        <IconList.Item>
          <Text>Icon list item</Text>
        </IconList.Item>
      </IconList>
    </Flex>
  </RadioCard>
</Flex>

$hideIndicator

The Radio indicator is an optional element that can be turned off. However, it's best practice to include the indicator in most cases.

<RadioCard onClick={() => {}} $hideIndicator>RadioCard without a Radio indicator</RadioCard>

System Modifiers

The RadioCard component also accepts props applied using the following system modifiers:

ControlField

RadioCard with Control Field creates a semantic grouping of Radio inputs and adds information like labels and validation messages.

<ControlField>
  <ControlField.Legend>Choose your preferred payment option</ControlField.Legend>

  <ControlField.Option
    checked
    as={RadioCard}
    name="payment"
    id="direct-debit"
    aria-describedby="message"
    onClick={() => {}}
  >
    <Text as="p" $marginBottom={2}>
      Pay monthly by direct debit
    </Text>
    <Text as="small" $fontSize="legal" $marginBottom={2}>
      Terms and conditions apply
    </Text>
  </ControlField.Option>

  <ControlField.Option
    as={RadioCard}
    name="payment"
    id="card"
    aria-describedby="message"
    onClick={() => {}}
  >
    Use same card as upfront payment
  </ControlField.Option>

  <ControlField.Message id="message">Payments are non-refundable</ControlField.Message>
</ControlField>

Layout of RadioCards could be changed using ControlField.Layout sub-component as Flex or Grid.

<ControlField>
  <ControlField.Legend>Choose your preferred payment option</ControlField.Legend>

  <ControlField.Layout $gap={4}>
    <ControlField.Option
      as={RadioCard}
      name="payment"
      checked
      id="first-option"
      aria-describedby="message"
      onClick={() => {}}
      $maxWidth="320px"
    >
      <Highlight>Featured</Highlight>

      <Flex $flexDirection="column" $height="100%" $justifyContent="space-between">
        <Box>
          <Image
            src="https://placehold.co/600x600.png/cccccc/4a4a4a?text=Product+Image"
            role="presentation"
            $objectFit="cover"
          />
          <Text as="h3" $fontSize="display-6" $fontWeight="bold" $marginTop={4} $marginBottom={2}>
            Card title
          </Text>
          <Text as="p" $fontSize="body-sm" $marginBottom={4}>
            Terms and conditions apply
          </Text>
        </Box>

        <Price price="£XX" $size="small" suffix="a month" $marginTop={4} />
      </Flex>
    </ControlField.Option>

    <ControlField.Option
      as={RadioCard}
      name="payment"
      id="second-option"
      aria-describedby="message"
      onClick={() => {}}
      $maxWidth="320px"
    >
      <Flex $flexDirection="column" $height="100%" $justifyContent="space-between">
        <Box>
          <Image
            src="https://placehold.co/600x600.png/cccccc/4a4a4a?text=Product+Image"
            role="presentation"
            $objectFit="cover"
          />
          <Text as="h3" $fontSize="body-lg" $fontWeight="bold" $marginTop={4} $marginBottom={2}>
            Card title
          </Text>
          <Text as="p" $fontSize="body-sm" $marginBottom={4}>
            Terms and conditions apply
          </Text>
        </Box>

        <Price price="£XX" $size="small" suffix="a month" $marginTop={4} />
      </Flex>
    </ControlField.Option>
  </ControlField.Layout>

  <ControlField.Message id="message">Payments are non-refundable.</ControlField.Message>
</ControlField>