Form field

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

Use Hidden form label when a native text input cannot show a label. For number input without a visible label, pass aria-label. Select and combobox take their name from this field's context.

#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 when a visible label fits. 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.
• When a native text input cannot show a label — use Hidden form label.
• When a number input cannot show a label — pass aria-label (or this field's context).

#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	—	booleanDetermines if this field is required.
isOptional	false	booleanIndicates if this field is optional.
label	—	ReactNodeField label.
badge	—	ReactNodeBadge to display near the label.
description	—	ReactNodeExtended description of the field.
rightContent	—	ReactNodeContent to display on the right side of the field. Appears inline with the label.
error	—	stringError message when this field's input is invalid.
children	—	ReactNodeField input.
tip	—	stringInstructions for the input value.