Form Field

Components

Form Field

Code

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

Name	Type	Default	Description
`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
`error`	`React.Node`		Text describing any error with the field's content
`helperText`	`React.Node`		Text acting as a description blurb below the main label *
`id`	`string`		ID of the form element (will be auto-generated if not provided)
`isInvalid`	`boolean`	`false`	Whether the current contents of the field are invalid
`required`	`boolean`		Whether the form element is required
`label`	`React.Node`		Label text to display above the form field
`qa`	`Object`
`isLabelHidden`	`boolean`	`false`	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>