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}) => <Element/>

The passed object should be spread onto the input element of the field to ensure proper accessibility.


System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

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


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'