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.

Select background colour

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

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

Props

checked

boolean

disabled

boolean

readOnly

boolean

state

error

Select background colour

<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>

<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>

showIndicator

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

Select background colour

<RadioCard onClick={() => {}} showIndicator={false}>RadioCard without a Radio indicator</RadioCard>

<RadioCard onClick={() => {}} showIndicator={false}>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.

Select background colour

<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>

<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.

Select background colour

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

  <ControlField.Layout>
    <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>

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

  <ControlField.Layout>
    <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>