Components

Form Field

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

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.

Properties

NameTypeDefaultDescriptionRequired?
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
errorReact.Node
Text describing any error with the field's content
helperTextReact.Node
Text acting as a description blurb below the main label *
idstring
ID of the form element (will be auto-generated if not provided)
isInvalidbooleanfalse
Whether the current contents of the field are invalid
labelReact.Node
Label text to display above the form field
qaObject
isLabelHiddenbooleanfalse
Whether the label text should be visually hidden

Recipes

Compose an entire form

Error in a field

import { FormField } from '@sproutsocial/racine'