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

• When you're adding an input to the form.

#When not to use

• When you're adding an input outside of the form.

#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.