FormControl

Multipart component to be used for creating form elements and wrapping inputs (see input, select, radio and checkbox).

Note that if you have multiple inputs that belong together, such as radio buttons, you may want to wrap them in a Fieldset.

Built on top of Chakra UI Field. It has four components:

• FormControl: Wrapper that provides context and functionality for form children.
• FormLabel: Label of a form section. The usage is similar to html label. “htmlFor” is set by default for children input.
• FormHelperText: Message that tells users more details about the form section.Adds/extends aria-describedby pointing to the form input.
• FormErrorMessage: Message that shows up when an error occurs. Will only show when the property isInvalid in FormControl is true.

Form Control provides form element state context to its children. Mainly isInvalid, isDisabled, and isRequired. These props passed to FormControl will cascade across all related components.

Props

isRequired

When isRequired is true the Input field will have aria-required set to true, and the FormLabel will show a red asterisk.

import { FormControl, FormHelperText, FormLabel, Select } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl isRequired w="250px">
      <FormLabel>Reservation time</FormLabel>
      <Select>
        <option value="option1">11:00</option>
        <option value="option2">12:00</option>
        <option value="option3">13:00</option>
      </Select>
      <FormHelperText>
        When arriving more than 15 minutes late your time is made available for others
      </FormHelperText>
    </FormControl>
  );
}

⛶

isInvalid

When isInvalid is true the form input will appear with error styles and FormErrorMessage will be made visible.

If you render FormErrorMessage and isInvalid is false or undefined, the element won’t be visible. Meaning there is no need to render it conditionally yourself.

Try writing in this stateful example to see this in action:

import { FormControl, FormErrorMessage, FormLabel, Input } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("%&!");
  const isInvalid = Boolean(value) && !value.includes("@");

  return (
    <FormControl isInvalid={isInvalid}>
      <FormLabel>Email</FormLabel>
      <Input type="email" value={value} onChange={(e) => setValue(e.target.value)} />
      <FormErrorMessage>Not a valid email</FormErrorMessage>
    </FormControl>
  );
}

⛶

isDisabled

Input element becomes non interactive and disabled-styling is applied.

import { FormControl, FormHelperText, FormLabel, Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl isDisabled>
      <FormLabel>React version</FormLabel>
      <Input defaultValue="18.2.0" />
      <FormHelperText>React version will never be 19</FormHelperText>
    </FormControl>
  );
}

⛶

isReadOnly

import { FormControl, FormHelperText, FormLabel, Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl isReadOnly>
      <FormLabel>Username</FormLabel>
      <Input defaultValue="user1" />
      <FormHelperText>Username cannot be changed</FormHelperText>
    </FormControl>
  );
}

⛶

Custom Layout

The subcomponents can be used in any layout you want. Here is an example with a custom layout:

import { Flex, FormControl, FormLabel, Input, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl>
      <Flex align="center" gap={ThemeSpace.Medium}>
        <FormLabel>Name</FormLabel>
        <Input type="text" defaultValue="Jane Doe" />
      </Flex>
    </FormControl>
  );
}

⛶

Subcomponents

<FormLabel>

A label should always be used with a form element, and describes the purpose of the form element.

The label has a standard size and appearence, but can be customized with most common style properties, such as color. It also supports an icon-prop, which will render an icon to the left of the label text. The icon inherits the color of the label text.

import { ColorIcon, FormControl, FormLabel, Input, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl>
      <FormLabel color={ThemeColor.Accent} icon={ColorIcon}>
        Your favourite color
      </FormLabel>
      <Input type="text" defaultValue="Blue" />
    </FormControl>
  );
}

⛶

<FormHelperText>

FormHelperText is used to provide additional context or instructions to users. It is placed below the form element.

import { FormControl, FormHelperText, FormLabel, Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl>
      <FormLabel>Username</FormLabel>
      <Input type="text" defaultValue="user1" />
      <FormHelperText>Only letters and numbers allowed</FormHelperText>
    </FormControl>
  );
}

⛶

<FormErrorMessage>

FormErrorMessage is used to provide feedback to users when an error occurs. It is placed below the form element. The visibility of the error message is controlled automatically by the isInvalid prop on the FormControl component.

import { FormControl, FormErrorMessage, FormLabel, Input } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <FormControl isInvalid={true}>
      <FormLabel>Email</FormLabel>
      <Input type="email" defaultValue="%!" />
      <FormErrorMessage>Not a valid email</FormErrorMessage>
    </FormControl>
  );
}

⛶