Form Control

<Input />

() => 'Label'

() => 'The description will come here'

() => 'Hold On!'

import * as React from "react";
import { FormControl } from "spaceweb/form-control";
import { Input } from "spaceweb/input";

export default () => {
  return (
    <FormControl
      label={() => "Label"}
      subText={() => "The description will come here"}
      className="w-full"
      caption={() => "Hold On!"}
    >
      <Input />
    </FormControl>
  );
}

The FormControl component adds a label and caption for its child control. If an error message is passed it renders that message in place of the caption.

Note, the FormControl expects a single child component. If that child has an id prop, the label in the form control will assign the htmlFor accordingly.

Examples

Note, red dot appears when required attribute is set. Form Control does not validate input, that has to be handled by consumer.

A common use case for an input on a form is to do some quick client side validation. Here, we are using the validate method from the email-validator package to track and update error states for both the form control and input components. This particular example shows the input in the context of a <form> element to show how the components' custom error states can compliment the browser's native form validation. The default form behavior is prevented so no network requests are sent on submit.

Note, for a Checkbox, the actual label is the accompanying text on the right side of the checkbox element.

Note, for a Switch, the actual label is the accompanying text on the right side of the switch element.

Note, for a Radio/RadioGroup, the actual label is the accompanying text on the right side of the radio element.

Caption with intent error is similar to error.

API

Form Control props

You can check the implementation of the component for more details.

Form Control exports

You can import this module like so:

import {FormControl} from 'spaceweb/form-control'

It exports the following components or utility functions:

• FormControl
• StyledCaption
• StyledControlContainer
• StyledInfoIconContainer
• StyledLabel
• StyledLabelContainer
• StyledRequiredDot
• StyledRoot
• StyledSubText