@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 @form-atoms/field jotai-effect zod
```
## Features
- ✅ **Well-typed fields** required & validated by default
- ✅ **Initialized field values**, commonly with `undefined` empty value
- ✅ **Optional fields** with schema defaulting to `z.optional()`
- ✅ **Conditionally required fields** - the required state can depend on other jotai atoms
- ✅ **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)
- ✅ **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, InputField } from "form-atoms";
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 (
);
};
```
See [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 |