Components

Form Field

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

You can refer to our form patterns for guidance on layout, proper usage and accessibility of various form elements.

import { FormField } from '@sproutsocial/racine'
<FormField
label='Field label'
helperText='Optional description to assist users in filling out this field.'
>
{props => <Input {...props} />}
</FormField>

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

({id, isInvalid, ariaDescribedby, required}) => <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
requiredboolean
Whether the form element is required
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

<Box>
<FormField
error="There is an error associated with this input"
helperText="This is a line of helper text"
isInvalid
label="Title"
>
{props => <Input {...props} />}
</FormField>
<FormField
error="There is an error associated with this input"
id="descriptionIdThatIWantedToPassIn"
label="Description"
>
{props => <Textarea {...props} />}
</FormField>
<FormField label="Reason">
{props => (
<Select {...props}>
<option value='apple'>Apple</option>
<option value='orange'>Orange</option>
<option value='banana'>Banana</option>
</Select>
)}
</FormField>
</Box>

Make a field required

import { FormField } from '@sproutsocial/racine'
<FormField
label='Required field'
helperText='Required fields are denoted with an asterisk.'
required
>
{props => <Input {...props} />}
</FormField>

Error in a field

import { FormField } from '@sproutsocial/racine'
<FormField
label='First Name'
helperText='Description to assist users in filling out this field.'
isInvalid
error='An optional error'
>
{props => <Input {...props} />}
</FormField>