Form Control

FormControl provides context such as isInvalid, isDisabled, and isRequired to form elements. This context is used by the following components:

It follows the WAI specifications for forms.

Import#

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
} from "@chakra-ui/core";

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
} from "@chakra-ui/core";

Usage#

Email address

We'll never share your email.

<FormControl>
  <FormLabel htmlFor="email">Email address</FormLabel>
  <Input type="email" id="email" aria-describedby="email-helper-text" />
  <FormHelperText id="email-helper-text">
    We'll never share your email.
  </FormHelperText>
</FormControl>

<FormControl>
  <FormLabel htmlFor="email">Email address</FormLabel>
  <Input type="email" id="email" aria-describedby="email-helper-text" />
  <FormHelperText id="email-helper-text">
    We'll never share your email.
  </FormHelperText>
</FormControl>

Editable Example

Sample usage for a radio or checkbox group#

Favorite Naruto Character

Sasuke

Nagato

Itachi

Sage of the six Paths

Select only if you're a fan.

<FormControl as="fieldset">
  <FormLabel as="legend">Favorite Naruto Character</FormLabel>
  <RadioGroup defaultValue="Itachi">
    <Radio value="Sasuke">Sasuke</Radio>
    <Radio value="Nagato">Nagato</Radio>
    <Radio value="Itachi">Itachi</Radio>
    <Radio value="Sage of the six Paths">Sage of the six Paths</Radio>
  </RadioGroup>
  <FormHelperText id="email-helper-text">
    Select only if you're a fan.
  </FormHelperText>
</FormControl>

<FormControl as="fieldset">
  <FormLabel as="legend">Favorite Naruto Character</FormLabel>
  <RadioGroup defaultValue="Itachi">
    <Radio value="Sasuke">Sasuke</Radio>
    <Radio value="Nagato">Nagato</Radio>
    <Radio value="Itachi">Itachi</Radio>
    <Radio value="Sage of the six Paths">Sage of the six Paths</Radio>
  </RadioGroup>
  <FormHelperText id="email-helper-text">
    Select only if you're a fan.
  </FormHelperText>
</FormControl>

Editable Example

Making a field required#

By passing the isRequired props, the Input field has aria-required set to true, and the FormLabel will show a red asterisks.

First name

<FormControl isRequired>
  <FormLabel htmlFor="fname">First name</FormLabel>
  <Input id="fname" placeholder="First name" />
</FormControl>

<FormControl isRequired>
  <FormLabel htmlFor="fname">First name</FormLabel>
  <Input id="fname" placeholder="First name" />
</FormControl>

Editable Example

Select Example#

Country

<FormControl>
  <FormLabel htmlFor="country">Country</FormLabel>
  <Select id="country" placeholder="Select country" />
</FormControl>

<FormControl>
  <FormLabel htmlFor="country">Country</FormLabel>
  <Select id="country" placeholder="Select country" />
</FormControl>

Editable Example

Usage with Form Libraries#

Form Libraries like Formik make it soooo easy to manage form state and validation. I 💖 Formik

function FormikExample() {
  function validateName(value) {
    let error;
    if (!value) {
      error = "Name is required";
    } else if (value !== "Naruto") {
      error = "Jeez! You're not a fan 😱";
    }
    return error;
  }

  return (
    <Formik
      initialValues={{ name: "Sasuke" }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <Field
            name="name"
            validate={validateName}
            render={({ field, form }) => (
              <FormControl isInvalid={form.errors.name && form.touched.name}>
                <FormLabel htmlFor="name">First name</FormLabel>
                <Input {...field} id="name" placeholder="name" />
                <FormErrorMessage>{form.errors.name}</FormErrorMessage>
              </FormControl>
            )}
          />
          <Button
            mt={4}
            variantColor="teal"
            isLoading={props.isSubmitting}
            type="submit"
          >
            Submit
          </Button>
        </form>
      )}
    />
  );
}

function FormikExample() {
  function validateName(value) {
    let error;
    if (!value) {
      error = "Name is required";
    } else if (value !== "Naruto") {
      error = "Jeez! You're not a fan 😱";
    }
    return error;
  }
  return (
    <Formik
      initialValues={{ name: "Sasuke" }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <Field
            name="name"
            validate={validateName}
            render={({ field, form }) => (
              <FormControl isInvalid={form.errors.name && form.touched.name}>
                <FormLabel htmlFor="name">First name</FormLabel>
                <Input {...field} id="name" placeholder="name" />
                <FormErrorMessage>{form.errors.name}</FormErrorMessage>
              </FormControl>
            )}
          />
          <Button
            mt={4}
            variantColor="teal"
            isLoading={props.isSubmitting}
            type="submit"
          >
            Submit
          </Button>
        </form>
      )}
    />
  );
}

Editable Example

Props#

Name	Type	Description
`isInvalid`	`boolean`	If `true`, this prop is passed to its children.
`isRequired`	`boolean`	If `true`, this prop is passed to its children.
`isDisabled`	`boolean`	If `true`, this prop is passed to its children.
`isReadOnly`	`boolean`	If `true`, this prop is passed to its children.

Proudly made in 🇳🇬

Released under the MIT License.

Form Control

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Sample usage for a radio or checkbox group#

Making a field required#

Select Example#

Usage with Form Libraries#

Props#

Import#