Form field

Form field is a wrapper for any input that's part of a form.

#Example

#Usage

#Required

Required form fields must have isRequired prop set to true. This adds a red asterisk near the label.

#Optional

Normally form fields don't need to be marked as optional, but in Formkit forms usually all fields are required and few are not. In that context, it may be useful to explicitly mark field as optional, which adds a small badge near the label.

#Invalid

Set error message via error prop to mark the field as invalid and show that message below the input.

#With badge

#With right content

#Guidelines

#When to use

• Always pair a form input (text input, textarea, number input, slug input, or anything in the select/combobox family) with a form field. The label is wired to the input through form-control context, so the input is named for everyone, including screen reader users. A bare input or an aria-label is not a substitute for a visible label.

#When not to use

• When the control labels itself: checkbox, radio, and switch carry their own labels, and search inputs and file inputs are self-describing.

#Content

• Use sentence case everywhere.
• Don't add a dot at the end to label, tip and error.
• Always end a sentence with a dot in description.

#Props

Inherits margin props.

Name	Default	Description
isRequired	—	boolean Determines if this field is required.
isOptional	false	boolean Indicates if this field is optional.
label	—	ReactNode Field label.
badge	—	ReactNode Badge to display near the label.
description	—	ReactNode Extended description of the field.
rightContent	—	ReactNode Content to display on the right side of the field. Appears inline with the label.
error	—	string Error message when this field's input is invalid.
children	—	ReactNode Field input.
tip	—	string Instructions for the input value.