Input

Inputs are stylized form controls with the ability of controling validation. Text Field Design Guidelines.

Description for the input.

Edit the code below to see your changes live!

API

Supports all native <input /> element attributes.

Input

Prop Name
Type
Default
Description
descriptionstring | FormControlDescription

Append a description to the input field.

errorstring | string[] | FormControlError | FormControlError[]

Displays an error message for the field. Error message will be passed to the FormGroup for display purposes.

iconLeftIcon

Pass in an Icon component to display to the left of the text.

iconRightIcon

Pass in an Icon component to display to the right of the text.

labelstring | FormControlLabel

Label element for inputs. Component with auto generate id's for the accessibility API.

labelIdstring

Appends an id to the generated label element.

Props ending with * are required

Error State

Inputs allow you to pass in an error message that will control the styles of an input. The logic on the input can be controlled with the onChange prop.

Provide a valid email address.

Email address must contain a domain name.

Edit the code below to see your changes live!

Icons

Inputs can also contain icons via the iconLeft & iconRight props.

Edit the code below to see your changes live!

Beta