@form-atoms/field v5.1.1
A zod
-powered fieldAtoms
with pre-configured schemas for type & runtime safety.
npm install jotai jotai-effect form-atoms @form-atoms/field 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 and Select
- Generic Multi-choice Components CheckboxGroup and MultiSelect
Quick Start
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 (
<form onSubmit={submit(console.log)}>
<InputField atom={fieldAtoms.name} label="Your Name" />
<InputField atom={fieldAtoms.age} label="Your age (min 18)" />
<Select
field={fieldAtoms.character}
label="Character"
options={["the good", "the bad", "the ugly"]}
getValue={(option) => option}
getLabel={(option) => option}
/>
</form>
);
};
See Storybook docs for more.
Integrations
@form-atoms/field
comes pre-wired to popular UI libraries:
📦Package | 🎨 Storybook | About |
---|---|---|
flowbite | Flowbite Fields | Bindigs to Tailwind component library Flowbite |
chakra-ui | ChakraUI Fields | Bindings to CSS-in-JS library Chakra UI |
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
10 months ago
5 months ago
5 months ago
5 months ago
7 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
5 months ago
7 months ago
7 months ago
10 months ago
7 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago