# lidso-form

> Easily manage forms in SolidJS

Latest version **0.0.2** (published 2023-06-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install lidso-form
pnpm add lidso-form
yarn add lidso-form
bun add lidso-form
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-06-18 |
| First published | 2023-06-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Selmir Nedžibi |
| Maintainers | contradictio |
| Keywords | forms, form, validation, typescript, solidjs form, lidso, solidjs, solid |

## Links

- npm: https://www.npmjs.com/package/lidso-form
- Repository: https://github.com/Contraboi/lidso-form
- Homepage: https://github.com/Contraboi/lidso-form/#readme
- Issues: https://github.com/Contraboi/lidso-form/issues
- npm.io page: https://npm.io/package/lidso-form

## Dependencies (1)

- [solid-js](https://npm.io/package/solid-js.md) ^1.6.2

## Recent versions

- 0.0.2 (latest) — 2023-06-18
- 0.0.1 — 2023-06-12

## README

# lidso-form

lidso-form is a library for managing forms in SolidJS, inspired by react-hook-form. 
It is a wrapper around the native HTML form element, which provides a simple API to manage form state and validation.

+ Built with performance, UX and DX in mind
+ Embraces native HTML form validation
+ Out of the box integration with UI libraries
+ Small size and no dependencies
+ TypeSafety

## Installation

```bash
npm install lidso-form
```

```bash
pnpm install lidso-form
```

```bash
yarn add lidso-form
```

## Quick start

```tsx
type LoginForm = {
    username: string;
    password: string;
};

const { fields, register, submitForm, formState: {errors, isLoading} } = createForm({
    onSubmit: (values) => {
        // do something with values
    },
});

return (
    <form onsubmit={submitForm}>
        <input
            {...register("username", [!fields.username && "Username is required"])}
        />
        {errors.username && <label>{errors.username}</label>}
        <input
            {...register("password", [!fields.password && "Password is required"])}
        />
        {errors.password && <label>{errors.password}</label>}
        <button disabled={isLoading} />
    </form>
);
```

## API

### `createForm`

The createForm function is a generic function that takes an options object where T represents the type of values that will be submitted through the form.

It has two properties:

+ **onSubmit**: This property is a function that takes a parameter values of type T, which represents the values submitted through the form.
+ **initialValues (optional)**:  Represents the initial values of the form fields. It allows specifying default values for the form fields. The keys of this object correspond to the keys of T, and the values can be string, number or boolean(depends on input type).

### `register`
This method allows you to register an input or select element and apply validation rules to form. Validation rules are all based on booleans, and return a string if the validation fails.
By invoking the register function and supplying an input's name, next things will happen:
+ oninput event will be registered to the input element which will trigger form state update & validation
+ name of the input element will be registered to the form state

### `formState`
This property is an object that contains all the state of the form. It has the following properties:
+ **isValid**: This property is a boolean value that indicates whether the form is valid.
+ **errors**: This property is an object that contains all the errors of the form. The keys of this object correspond to the keys of T, and the values are strings that represent the error message.
+ **isValid**: This property is a boolean value that indicates whether the form is valid.
+ **touchedFields**: This property is an object that contains all the touched fields of the form. The keys of this object correspond to the keys of T, and the values are boolean values that indicate whether the field has been touched.
+ **submitCount**: This property is a number that indicates how many times the form has been submitted.
+ **isLoading**: This property is a boolean value that indicates whether the form is in the process of submitting.

### `submitForm`
This method allows you to submit the form. It will trigger validation for all fields and if all fields are valid, it will invoke the onSubmit function passed to the registered to form.

### `fields`
This property is an object that contains all the fields of the form. The keys of this object correspond to the keys of T.

### `setFields`
This is SolidJS Store that allows you to set the fields of the form. It takes an object where the keys correspond to the keys of T, and the values can be string, number or boolean(depends on input type).

---
_Source: https://npm.io/package/lidso-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._