Form control

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.

Form control usage

Input caption
Textarea caption
Checkbox caption
RadioGroup caption

Form control kinds

Input caption
Positive caption
Error caption

Overrides

Additionally, you can fully customize any part of the Form Control through the overrides prop. The Form Control consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Input caption

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

FormControl API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>