Control Field - React

View on GitHub

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.

<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" onChange={() => {}} $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" onChange={() => {}} $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>

<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" onChange={() => {}} $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" onChange={() => {}} $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

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

<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

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

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

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

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

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

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

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

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

<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