> For the complete documentation index, see [llms.txt](https://redd.gitbook.io/react-advanced-form/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://redd.gitbook.io/react-advanced-form/getting-started/creating-fields.md).

# Creating fields

> Code examples in this documentation are using field component from the `react-advanced-form-addons` package for the illustrational purposes only. We recommend to define your own set of fields that suit your project's needs foremost.

Integration of React Advanced Form in your application begins from creating a set of reusable fields components. Those are later used to compose any form.

## Implementation

A field is a React component wrapped in the `createField` high-order component exposed by the library. The wrapper ensures essential field functionality and allows to customize a field's behavior. It also binds internal field's state to reflect in the UI. 

Let's create a simple text input component:

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

const Input = (props) => {
  /**
   * "fieldProps" need to be mapped to the field element.
   * "fieldState" contains the current state of a field.
   */
  const { fieldProps, fieldState } = props
  const { touched, errors } = fieldState
  
  return (
    <div className="input">
      {/* Propagating "fieldProps" is crucial to register a field */}
      <input {...fieldProps} />
      
      {/* Render input errors underneath */}
      {touched && errors && errors.map((error) => (
        <div className="text--red">{error}</div>
      ))}
    </div>
  )
}

export default createField(fieldPresets.input)(Input)
```

There are a few important things happening in the snippet above:

1. Mapping `fieldProps` to the actual input element.
2. Using `fieldPresets.input` [preset](/react-advanced-form/hoc/create-field/presets.md) to have essential options for the input element.
3. Using `fieldState` to reflect field state in the UI.

## Examples

Take a look into the field components used internally for the integration testing of the library.

### Common

* [Input](https://github.com/kettanaito/react-advanced-form/tree/master/examples/fields/Input.jsx)
* [FileInput](https://github.com/kettanaito/react-advanced-form/blob/master/examples/fields/FileInput.jsx)
* [Radio](https://github.com/kettanaito/react-advanced-form/tree/master/examples/fields/Radio.jsx)
* [Checkbox](https://github.com/kettanaito/react-advanced-form/tree/master/examples/fields/Checkbox.jsx)
* [Select](https://github.com/kettanaito/react-advanced-form/tree/master/examples/fields/Select.jsx)
* [Textarea](https://github.com/kettanaito/react-advanced-form/tree/master/examples/fields/Textarea.jsx)

### Third-party

React Advanced Form can be used with any third-party field library.

* [react-datepicker](https://github.com/kettanaito/react-advanced-form/blob/master/examples/third-party/react-datepicker/Datepicker.jsx)
* [react-select](https://github.com/kettanaito/react-advanced-form/blob/master/examples/third-party/react-select/Select.jsx)
* [react-lider](https://github.com/kettanaito/react-advanced-form/blob/master/examples/third-party/react-slider/Slider.jsx)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://redd.gitbook.io/react-advanced-form/getting-started/creating-fields.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.