Form Field Managed · @behivetech · Behive Tech Registry

Edit the code and the preview updates as you type. Every registry export is in scope — FormFieldManaged from this package, plus React hooks and every other component in the registry.

Playground

interface DemoValues {
  email: string;
  role: string;
  active: boolean;
}

const ROLES = [
  { label: "Admin", value: "admin" },
  { label: "Editor", value: "editor" },
];

const ManagedForm = () => {
  const methods = useForm<DemoValues>({
    defaultValues: { email: "", role: "", active: false },
  });

  return (
    <Form methods={methods} onSubmit={(values) => console.log(values)}>
      <FormFieldManaged
        control={methods.control}
        name="email"
        label="Email"
        hint="We only use this for sign-in"
        required
        rules={{ required: "Email is required" }}
      >
        {(field) => <TextField {...field} type="email" />}
      </FormFieldManaged>

      <FormFieldManaged
        control={methods.control}
        name="role"
        label="Role"
        rules={{ required: "Pick a role" }}
      >
        {(field) => (
          <Select
            id={field.id}
            name={field.name}
            options={ROLES}
            value={field.value}
            onValueChange={field.onChange}
            placeholder="Pick one"
          />
        )}
      </FormFieldManaged>

      <FormFieldManaged control={methods.control} name="active" label="Active">
        {(field) => (
          <Toggle
            id={field.id}
            name={field.name}
            checked={field.value}
            onCheckedChange={field.onChange}
          />
        )}
      </FormFieldManaged>

      <Button type="submit" variant="primary" size="sm">
        Save
      </Button>
    </Form>
  );
};

render(<ManagedForm />);