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

System props

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

NameTypeDefaultDescriptionRequired?
idstring
id of the form element, otherwise one will be autogenerated
labelReactNode
text for label
helperTextReactNode
optional helper text
errorReactNode
text for error message
isInvalidbooleanfalse
to render an error state
childrensignature
function as child => input component to render

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'