https://github.com/andrejnemec/solidjs-final-form

A Solid.js integration for Final Form, providing robust form management capabilities with reactive rendering.
https://github.com/andrejnemec/solidjs-final-form

final-form final-form-array form form-solid forms react-hook-form solid solid-final-form solid-final-form-array solid-form solid-hook-form solidjs

Last synced: 19 days ago
JSON representation

A Solid.js integration for Final Form, providing robust form management capabilities with reactive rendering.

• Host: GitHub
• URL: https://github.com/andrejnemec/solidjs-final-form
• Owner: AndrejNemec
• License: mit
• Created: 2023-11-23T00:18:40.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-23T17:19:52.000Z (about 1 year ago)
• Last Synced: 2025-01-06T10:49:16.233Z (27 days ago)
• Topics: final-form, final-form-array, form, form-solid, forms, react-hook-form, solid, solid-final-form, solid-final-form-array, solid-form, solid-hook-form, solidjs
• Language: TypeScript
• Homepage:
• Size: 301 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# Solid final form

[![npm version](https://badge.fury.io/js/@solidjs-final-form%2Fcore.svg)](https://badge.fury.io/js/@solidjs-final-form%2Fcore)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

**Solid final form** is a comprehensive library that bridges the robust form management capabilities of Final Form with the reactive and efficient rendering of Solid.js. Designed specifically for Solid.js developers, this package offers an elegant and powerful solution for creating, managing, and validating forms with ease.

---

## Quick start

### Installation:

```bash

npm i @solidjs-final-form/core final-form

# or

yarn add @solidjs-final-form/core final-form

# or

pnpm add @solidjs-final-form/core final-form

```

---

### Simple usage:

**For TypeScript users:**

Add directives to your `global.d.ts`

```ts

import { FormDirectives } from '@solidjs-final-form/core'

declare module "solid-js" {

  namespace JSX {

    interface Directives extends FormDirectives {}

  }

}

```

### Examples:

- [Simple example](https://github.com/AndrejNemec/solidjs-final-form/blob/master/apps/examples/src/simple/SimpleForm.tsx)

- [With valibot](https://github.com/AndrejNemec/solidjs-final-form/blob/master/apps/examples/src/with-valibot/WithValibotForm.tsx)

  - Require `npm i valibot`

  - Require `npm i @solidjs-final-form/valibot-adapter`

- [With auto-focus on first error](https://github.com/AndrejNemec/solidjs-final-form/blob/master/apps/examples/src/with-auto-focus-on-first-error/WithAutoFocusOnFirstErrorForm.tsx)

  - Require `npm i final-form-focus`

- [With array fields and valibot validation](https://github.com/AndrejNemec/solidjs-final-form/blob/master/apps/examples/src/with-arrays/FormWithArrays.tsx)

  - Require `npm i valibot`

  - Require `npm i @solidjs-final-form/valibot-adapter`

  - Require `npm i @solidjs-final-form/arrays`