https://github.com/form-atoms/field
FieldAtoms extended with required state and validated by zod schema.
https://github.com/form-atoms/field
form-atoms form-atoms-field jotai jotai-form react react-form
Last synced: about 2 months ago
JSON representation
FieldAtoms extended with required state and validated by zod schema.
- Host: GitHub
- URL: https://github.com/form-atoms/field
- Owner: form-atoms
- License: mit
- Created: 2023-02-04T11:43:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-04T10:14:59.000Z (10 months ago)
- Last Synced: 2024-12-04T11:24:27.378Z (10 months ago)
- Topics: form-atoms, form-atoms-field, jotai, jotai-form, react, react-form
- Language: TypeScript
- Homepage: https://form-atoms.github.io/field/
- Size: 5.24 MB
- Stars: 19
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
@form-atoms/field
A `zod`-powered [`fieldAtoms`](https://github.com/form-atoms/form-atoms?tab=readme-ov-file#fieldatom) with pre-configured schemas for type & runtime safety.
```
npm install jotai jotai-effect form-atoms @form-atoms/field zod
```
## Features
- [x] **Well-typed fields** required & validated by default
- [x] **Initialized field values**, commonly with `undefined` empty value
- [x] **Optional fields** with schema defaulting to `z.optional()`
- [x] **Conditionally required fields** - the required state can depend on other jotai atoms
- [x] **Generic Single-choice Components** [RadioGroup](https://form-atoms.github.io/field/?path=/docs/components-radiogroup--docs) and [Select](https://form-atoms.github.io/field/?path=/docs/components-select--docs)
- [x] **Generic Multi-choice Components** [CheckboxGroup](https://form-atoms.github.io/field/?path=/docs/components-checkboxgroup--docs) and [MultiSelect](https://form-atoms.github.io/field/?path=/docs/components-multiselect--docs)
### Quick Start
```tsx
import { textField, numberField, stringField, Select } from "@form-atoms/field";
import { fromAtom, useForm, Input } from "form-atoms";
import { z } from "zod";
const personForm = formAtom({
name: textField(),
age: numberField({ schema: (s) => s.min(18) }); // extend the default schema
character: stringField().optional(); // make field optional
});
export const Form = () => {
const { fieldAtoms, submit } = useForm(personForm);
return (
option}
getLabel={(option) => option}
/>
);
};
```
See [Storybook docs](https://form-atoms.github.io/field/) for more.
## Integrations
`@form-atoms/field` comes pre-wired to popular UI libraries:
| 📦Package | 🎨 Storybook | About |
| ---------------------------------------------------- | --------------------------------------------------------- | ---------------------------------------------- |
| [flowbite](https://github.com/form-atoms/flowbite) | [Flowbite Fields](https://form-atoms.github.io/flowbite/) | Bindigs to Tailwind component library Flowbite |
| [chakra-ui](https://github.com/form-atoms/chakra-ui) | [ChakraUI Fields](https://form-atoms.github.io/chakra-ui) | Bindings to CSS-in-JS library Chakra UI |