---
title: "Control Field — React"
canonical: https://sky-ui.cf.sky.com/components/control-field/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Control Field — React

Control fields are used with checkbox and radio components.

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

---

The `ControlField` component builds up a semantic grouping of inputs and adds information like labels and validation messages.

---

## Sub Components

- `ControlField.Legend` – label of the input group
- `ControlField.Layout` – grouping element for multiple Layout
- `ControlField.Option` – input element with its label
- `ControlField.Validation` – error message of the input group
- `ControlField.Message` – inline message of the group

Using `ControlField.Layout` with [Radio Card](/components/radio-card/).

```tsx
<ControlField>
    <ControlField.Legend id="payment-legend">Choose your preferred payment option</ControlField.Legend>

    <ControlField.Layout as={Grid} $gap={5} $gridTemplateColumns={{ xs: '1fr', lg: '1fr 1fr 1fr' }}>
      <ControlField.Option checked as={RadioCard} name="payment" 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="display-7" $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="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.Layout>

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

---

## Props

### as

Either a `RadioInput`, `CheckboxInput` or `RadioCard` component needs to be passed to the `as` prop on each of the `ControlField.Option` child components.

---

#### Checkbox

```tsx
<ControlField>
    <ControlField.Legend>Which is your favourite?</ControlField.Legend>

    <ControlField.Option as={CheckboxInput} name="content" id="movies" aria-describedby="message">
      Sky Movies
    </ControlField.Option>

    <ControlField.Option as={CheckboxInput} name="content" id="sports" aria-describedby="message">
      Sky Sports
    </ControlField.Option>

    <ControlField.Message id="message">
      Inline message providing addition context on the input field.
    </ControlField.Message>

</ControlField>
```

---

#### Radio

```tsx
<ControlField>
    <ControlField.Legend>How can we get in touch?</ControlField.Legend>

    <ControlField.Option as={RadioInput} name="communication" id="email" aria-describedby="message">
      Email
    </ControlField.Option>

    <ControlField.Option as={RadioInput} name="communication" id="pigeon" aria-describedby="message">
      Carrier pigeon
    </ControlField.Option>

    <ControlField.Message id="message">Will not be used for marketing.</ControlField.Message>
</ControlField>
```

---

### inlineMessage

`ControlField.Option` can have an inline message, which could be set by `inlineMessage` prop.

```tsx
<ControlField>
    <ControlField.Legend>How can we get in touch?</ControlField.Legend>

    <ControlField.Option as={CheckboxInput} name="communication" id="email" inlineMessage="Your personal email">
      Email
    </ControlField.Option>

    <ControlField.Option as={CheckboxInput} name="communication" id="pigeon" inlineMessage="Your personal pigeon">
      Carrier pigeon
    </ControlField.Option>

</ControlField>
```

---

### $legal

Add `$legal` property to `ControlField.Option` to set legal variant of the Checkbox. Legal variant of the label doesn't have an inline message.

```tsx
<ControlField>
    <ControlField.Legend>How can we get in touch?</ControlField.Legend>

    <ControlField.Option as={CheckboxInput} name="communication" id="email" aria-describedby="message" $legal>
      Email
    </ControlField.Option>

    <ControlField.Option as={CheckboxInput} name="communication" id="pigeon" aria-describedby="message" $legal>
      Carrier pigeon
    </ControlField.Option>

    <ControlField.Message id="message">Will not be used for marketing.</ControlField.Message>
</ControlField>
```

---

### state

Setting the `state` prop to `state="error"` on the `ControlField` component will cause error styling to be applied.

You can add an error message in addition to the inline message of the input group.

**Note:** It is best practice to validate input fields only upon form submission.

```tsx
<ControlField state="error">
    <ControlField.Legend>How can we get in touch?</ControlField.Legend>

    <ControlField.Option as={CheckboxInput} name="communication" id="email" aria-describedby="validation message">
      Email
    </ControlField.Option>

    <ControlField.Option as={CheckboxInput} name="communication" id="pigeon" aria-describedby="validation message">
      Carrier pigeon
    </ControlField.Option>

    <ControlField.Validation id="validation">You must select at least one option</ControlField.Validation>

    <ControlField.Message id="message">Will not be used for marketing.</ControlField.Message>

</ControlField>
```

---

## System Modifiers

`ControlField.Option` supports the following system functions:

- [margin](/core/system/margin/)