Component size, gzipped: 14kb

Form Control

API

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

Validation example (with email)

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.

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.

API

Form Control props

NameTypeDescription
caption
function
A caption rendered below the input field.
children
react node
Content wrapped by FormControl.
disabled
boolean
Displays label in light gray color if true.
error
function
Error state of the input. If an error prop passed it will be rendered in place of caption as an error message.
label
function
A label rendered above the input field.
overrides
custom
Lets you customize all aspects of the component.
positive
function
Positive state of the input. If an error prop passed it will be rendered in place of positive as an error message.

Form Control exports

You can import this module like so:

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

It exports the following components or utility functions: