> For the complete documentation index, see [llms.txt](https://luisgustavolf.gitbook.io/react-satisfying-forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://luisgustavolf.gitbook.io/react-satisfying-forms/quick-start/custom-field-factory.md).

# Custom Field Factory

Now things begins to be fun, and closer to the real word! After all, you need to display errors and other thinks that your user needs.

```jsx
// myFieldFactory.tsx
// ------------------

// Some extra fprops
interface MyFieldFactoryProps {
    fLabel?: string
}

// Your awesome factory, with error displaying, label and requirement showing
function MyFieldFactory<TProps>(field: FieldFactoryArgs<TProps>) {
    return FieldFactory<TProps, MyFieldFactoryProps>((fprops, props, fieldBindings, fielStatus) => 
            <div>
                <div>
                    {fprops.fLabel}
                    {fprops.fRequired && "*"}
                </div>
                <div>
                    {field(fprops, props, fieldBindings, fielStatus)}
                </div>
                <div>
                    {fielStatus.shouldDisplayErrors && fielStatus.errors}
                </div>
            </div>
        )

}
```

Now, just use your factory on your components!

```jsx
// componentField.tsx
// --------------

// Use it!
const ComponentField = MyFieldFactory<ComponentProps>((fprops, props, fieldBindings, fielStatus) => 
    <Component {...props} {...fieldBindings} />
)
```