React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • FAQ
  • Getting started
    • Installation
    • Creating fields
    • Creating form
    • Validation rules
    • Validation messages
    • Applying validation
    • Handle submit
  • Architecture
    • Argument properties
    • Referencing
    • Field lifecycle
    • Controlled fields
    • Reactive props
  • Validation
    • Getting started
    • Validation schema
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Presets list
  • Example
  • Basic
  • Extending a preset
  1. High-order components
  2. createField

Field presets

PreviousOptionsNextExposed props

Last updated 6 years ago

Presets contain pre-defined createField relevant to the respective field type. Those options ensure proper field behavior as well as automatically map essential form element's props (i.e. placeholder, multiselect, etc.) from the wrapped component to the actual form element.

Presets are designed for seamless integration of common field types. For the custom fields you may want to consider writing your own presets or extending the existing ones.

Presets list

There are field presets for all common field types. Those should provide a sensible defaults, therefore it is recommended to use them when declaring a respective field component.

  • fieldPresets.input

  • fieldPresets.textarea

  • fieldPresets.checkbox

  • fieldPresets.select

  • fieldPresets.radio

Example

Basic

import React from 'react'
import { createField, fieldPresets } from 'react-advanced-form'

const Select = ({ children, fieldProps }) => (
  <select {...fieldProps}>
    {children}
  </select>
)

export default createField(fieldPresets.select)(Select)

Extending a preset

import React from 'react'
import { createField, fieldPresets } from 'react-advanced-form'

const DateSelect = ({ children, fieldProps }) => (
  <select {...fieldProps}>
    {children}
  </select>
)

export default createField({
  ...fieldPresets.select,
  valuePropName: 'selectedDate',
})(DateSelect)
options