Toggling a field
typed-react-form
allows you to use multiple inputs on the same field, with this feature, you can create a primary input which contains the actual field value, and a secondary field, a checkbox, which sets the field to null/undefined when unchecked.
Examples
✔️ Toggle string field using checkbox
import { useForm, Field } from "typed-react-form";
function ToggleForm() {
const form = useForm({
name: "codestix"
});
return (
<form
onSubmit={(ev) => {
ev.preventDefault();
console.log("submit", form.values);
}}
>
{/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
<Field form={form} name="name" type="checkbox" setNullOnUncheck value="" />
{/* Use the hideWhenNull prop to hide the input when its field is null */}
<Field form={form} name="name" type="text" hideWhenNull />
<button>Submit</button>
</form>
);
}
✔️ Toggle object field using checkbox
function ToggleForm() {
const form = useForm({
name: "codestix",
location: { long: 123, lat: 456 } // Object field
});
return (
<form
onSubmit={(ev) => {
ev.preventDefault();
console.log("submit", form.values);
}}
>
<Field form={form} name="name" type="text" />
{/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
<Field form={form} name="location" type="checkbox" setNullOnUncheck />
{/* ObjectField hides its contents when null/undefined */}
<ObjectField
form={form}
name="location"
render={(form) => (
<>
<p>Location lat/long</p>
<Field form={form} name="lat" type="number" />
<Field form={form} name="long" type="number" />
</>
)}
/>
<button>Submit</button>
</form>
);
}