Edit this page
[?] Component size, gzipped: 23kb

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.

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

Input

Input caption

Textarea

Textarea caption

Checkbox

Checkbox caption

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

RadioGroup

RadioGroup caption

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

Select

Select caption

States

Input caption
Positive caption
Error caption

The positive and error props accept both boolean and string values. If you pass a string, it will be used as the caption of the form control, overriding any value passed to the caption prop. The example above showcases this behavior.

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!

API

FormControl API

overrides object = {}

Label { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Caption { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ControlContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

label nullable union = null

A label rendered above the input field.

One of
Node,
Object => Node

caption nullable union = null

A caption rendered below the input field.

One of
Node,
Object => Node

disabled boolean

Displays label in light gray color if true

error union = false

Error state of the input. If an error prop passed it will be rendered in place of caption as an error message.

One of
Node,
Object => Node

positive union = false

Positive state of the input. If an error prop passed it will be rendered in place of positive as an error message.

One of
Node,
Object => Node

children Node required

Node

Form Control exports

You can import this module like so:

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

It exports the following components or utility functions:

  • FormControl
  • StyledLabel
  • StyledCaption
  • StyledControlContainer