Components

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.

Properties

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element (will be auto-generated if not provided)
labelReact.Node
Label text to display above the form field
helperTextReact.Node
errorReact.Node
Text describing any error with the field's content
isInvalidbooleanfalse
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

Recipes

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'