@splatterxl/chakra-forms

chakra-forms

Simple reusable form library for my projects.

Installation

yarn add @splatterxl/chakra-forms

Example

const MyForm = () => {
  return (
    <Form
      id="login"
      onSubmit={(values) => {
        console.log(values.username, values.password);
      }}
      initialFocus="username"
    >
      <FormBody>
        <FormField
          as={TextInput}
          id="username"
          label="Email"
          defaultValue="[e-mail]"
          autocomplete={{
            type: FormInputAutocompleteTypes.USERNAME,
          }}
          schema={{ email: true }}
          required
        />
        <FormField
          as={PasswordInput}
          id="password"
          label="Password"
          autocomplete={{
            type: FormInputAutocompleteTypes.CURRENT_PASSWORD,
          }}
          required
        />
      </FormBody>
    </Form>
  );
};

Documentation

• Website