Form Field

Form Field controls the layout of form elements alongside their labels and errors.

Optional description to assist users in filling out this field.

import { FormField } from '@sproutsocial/racine'

Notice that the children passed to Form Field should be a function with the following signature:

({id, isInvalid, ariaDescribedby}) => <Element/>

All elements of the passed object should be spread onto the form element to ensure proper accessibility. It’s best to spread the object, instead of applying each prop individually, so that any future updates to these props will automatically apply.


children(options: { id: string, isInvalid: boolean, ariaDescribedby: string, }) => React.Element<any>
A function that receives props that need to be spread onto the child element
Text describing any error with the field's content
Text acting as a description blurb below the main label *
ID of the form element (will be auto-generated if not provided)
Whether the current contents of the field are invalid
Label text to display above the form field


Compose an entire form

This is a line of helper text

There is an error associated with this input

Error in a field

Description to assist users in filling out this field.

An optional error
import { FormField } from '@sproutsocial/racine'