---
title: "Radio Card — React"
canonical: https://sky-ui.cf.sky.com/components/radio-card/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Radio Card — React

Radio Card offers mutually exclusive options, providing more content than the Radio component

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

---

**Note:** For fully composed form element examples and usage description see [Control
  Field](/components/control-field/).

---

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

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

---

## Props

### checked

`boolean`

#### disabled

`boolean`

### readOnly

`boolean`

### state

- `error`

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

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

**Note:** The [Radio](/components/radio/) indicator is an optional element that can be turned off. However,
  it's best practice to include the indicator in most cases.

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

---

## System Modifiers

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

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [flex-parent](/core/system/flex-parent/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [padding](/core/system/padding/)
- [width](/core/system/width/)

---

### ControlField

`RadioCard` with [Control Field](/components/control-field) creates a semantic grouping of [Radio](/components/radio/) inputs and adds information like labels and validation messages.

```tsx
<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 `RadioCard`s could be changed using `ControlField.Layout` sub-component as [Flex](/components/flex/) or [Grid](/components/grid/).

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

```