Form

Import

import { Form } from '@contentful/f36-components';
// or
import { Form } from '@contentful/f36-forms';

Examples

Go ahead and add some fields into your form:

• Form control
• Text input
• Textarea
• Checkbox
• Radio
• Select
• Switch

Basic

Hide code
function FormExample() {
  const [submitted, setSubmitted] = useState(false);
  const submitForm = () => {
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
    }, 1000);
  };

  return (
    <Form onSubmit={submitForm}>
      <FormControl>
        <FormControl.Label isRequired>Name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>
          Please enter your first name
        </FormControl.HelpText>
      </FormControl>

      <FormControl>
        <FormControl.Label>Description</FormControl.Label>
        <Box>
          <Textarea />
        </Box>
        <FormControl.HelpText>Tell me about yourself</FormControl.HelpText>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
function FormExample() {
  const [submitted, setSubmitted] = useState(false);
  const submitForm = () => {
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
    }, 1000);
  };

  return (
    <Form onSubmit={submitForm}>
      <FormControl>
        <FormControl.Label isRequired>Name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>
          Please enter your first name
        </FormControl.HelpText>
      </FormControl>

      <FormControl>
        <FormControl.Label>Description</FormControl.Label>
        <Box>
          <Textarea />
        </Box>
        <FormControl.HelpText>Tell me about yourself</FormControl.HelpText>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
Open in Playground

Using character count

Hide code
function FormCharacterCountExample() {
  const [submitted, setSubmitted] = useState(false);
  const submitForm = () => {
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
    }, 1000);
  };

  return (
    <Form onSubmit={submitForm}>
      <FormControl>
        <FormControl.Label isRequired>user name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>Please enter your username</FormControl.HelpText>
      </FormControl>
      <FormControl>
        <FormControl.Label isRequired>password</FormControl.Label>
        <TextInput maxLength={10} type="password" />
        <Flex justifyContent="space-between">
          <FormControl.HelpText>
            Password can only have 10 characters
          </FormControl.HelpText>
          <FormControl.Counter />
        </Flex>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
function FormCharacterCountExample() {
  const [submitted, setSubmitted] = useState(false);
  const submitForm = () => {
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
    }, 1000);
  };

  return (
    <Form onSubmit={submitForm}>
      <FormControl>
        <FormControl.Label isRequired>user name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>Please enter your username</FormControl.HelpText>
      </FormControl>
      <FormControl>
        <FormControl.Label isRequired>password</FormControl.Label>
        <TextInput maxLength={10} type="password" />
        <Flex justifyContent="space-between">
          <FormControl.HelpText>
            Password can only have 10 characters
          </FormControl.HelpText>
          <FormControl.Counter />
        </Flex>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
Open in Playground

Content guidelines

• The Form component should wrap form elements into <form />
• Provide an onSubmit handler for form validation and submission
• The state of the validation of the form should be manipulated from outside

Integrations

It is possible to integrate the form with solutions like Formik or React form hook