Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Form Field

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

#

#

#

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

#

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.

#

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

#

#

#

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

#

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

#

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

#

Inherits margin props.

NameDefaultDescription
isRequired

boolean

Determines if this field is required.

isOptionalfalseboolean

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.

error

string

Error message when this field's input is invalid.

children

ReactNode

Field input.

tip

string

Instructions for the input value.

On this page

  • Example
  • Usage
  • Required
  • Optional
  • Invalid
  • With badge
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props