Return to Sky UI homepage

Radio Card - React

View on FigmaView 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>